sass - SCSS @import with & to children 上课

Question

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

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

这样一个类(class) .foo在 another-file.scss将编译为 .my-class .foo在输出中。

我想要做的是导入一个文件，以便文件中的所有规则都添加到某个类中，如下所示:

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

这样的 .foo在 another-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;
}