Question

我正在一个项目中，该项目有一个用于多个组件的main style.scss文件。我想重组代码，以便每个组件都有自己的文件夹（index.js，styles.scss）。有一个嵌套的类正在使用另一个组件中的类，现在我必须分离所有样式，这一部分已损坏。我不能使用组合，因为它是一个嵌套类。我还能采取什么其他方法？

代码如下：

// Component A styless.scss

.component-a-class {

}

// Component B styless.scss 

.component-b-class{

.component-a-class {

  }
}

Answer 1

使用Sass的@import指令导入外部类。您的代码将变成这样：

impl B for C {
    fn get(&self, key: &'static str) -> Option<&A> {
        return self.map.get(key).map(|value| &**value)
    }
}

这会将// ComponentA/styless.scss .component-a-class { ... } // ComponentB/styless.scss .component-b-class{ @import "../ComponentA/styless.scss" }作为嵌套规则注入.component-a-class。

编辑：要导入样式并能够修改其属性之一，必须使用Sass mixins：

.component-b-class

这不是理想的选择，它将为您提供所需的东西。生成的已编译// ComponentA/styless.scss @mixin component-a-class($width: 100) { .component-a-class { width: $width + px; } } @include component-a-class(); // ComponentB/styless.scss @import "../ComponentA/style.scss"; .component-b-class{ @include component-a-class(500); }文件将包含用ComponentB/styless.css编写的所有，因为ComponentA/styless.scss指令是“全部或全部”功能（没有选择性导入））。结果将如下所示：

@import

CSS模块，嵌套类中的组合

1 个答案: