SCSS @import语句如何将&传递给子级class？

Question

我知道你可以在类内部像这样导入:

.my-class
{
    @import "another-file.scss";
}

需要实现的是，将another-file.scss文件中的.foo类编译为输出中的.my-class .foo。

我想要做的是导入一个文件，使其所有规则都添加上一个特定的类，就像这样：

.my-class
{
    &@import "another-file.scss";
}

这样，another-file.scss 中的 .foo 将编译为输出中的 .my-class.foo。

我正在构建一组组件，它们都共享一个类，因为它们都是同一“套件”的一部分，我希望它们都共享一个类来表示它们属于同一“套件”，但我不想将它们全部放在同一个文件中。

这个可行吗？

谢谢！

- Jake

Answer 1

为了实现这一点，您只需要在导入的文件中使用&标识选择器即可。

例如，如果您导入以下文件，它将为.my-class.header、my-class.header.cool和my-class.footer创建规则：

&.header {
    color: blue;
    &.cool {
        font-size: 20px;
    }
}

&.footer {
    color: blue;
}

- litel