CSS模块，嵌套类中的组合

Question

我正在开发一个项目，其中有一个主要的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指令导入外部类。你的代码会变成这样：

// ComponentA/styless.scss

.component-a-class {
  ...
}

// ComponentB/styless.scss 

.component-b-class{
    @import "../ComponentA/styless.scss"
}

这会将.component-a-class作为嵌套规则注入.component-b-class。

---

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

// 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指令是“全有或全无”功能（没有选择性导入）。结果如下所示：

// ComponentB/styless.css (compiled)

.component-a-class {
  width: 100px;
}

.component-b-class .component-a-class {
  width: 500px;
}