SCSS @import with & to 孩子们上课

Question

我知道你可以在这样的类中进行导入：

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

这样一类.foo在another-file.scss将编译到.my-class .foo输出。

我想要做的是导入一个文件，这样文件中的所有规则都会添加一个特定的类，如下所示：

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

这样.fooinanother-file.scss将编译到.my-class.foo输出中。

我正在构建一组共享一个类的组件，因为它们都是同一个“套件”的一部分，我希望它们都共享一个表示它们的类，但我不想让它们全部在一个巨大的巢穴下的同一个文件中。

这可能吗？

谢谢！

Answer 1

要实现此目的，您只需在要导入的文件中的选择器前面添加&.

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

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

&.footer {
    color: blue;
}