sass – SCSS @import with&to children to class

2023年8月19日 260次阅读

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

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

这样,另一个file.scss中的类.foo将在输出中编译为.my-class .foo.

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

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

这样,另一个file.scss中的.foo将在输出中编译为.my-class.foo.

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

这可能吗？

谢谢！

最佳答案 要实现这一点,您只需要在要导入的文件中为选择器添加前缀&amp ;.

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

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

&.footer {
    color: blue;
}
点赞