SCSS @import with＆amp;给孩子上课

Question

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

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

这样.foo中的another-file.scss类会在输出中编译为.my-class .foo。

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

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

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

我正在构建一组所有共享一个类的组件，因为它们都是同一个组件的一部分＆＃34; kit＆＃34;，我希望它们共享一个表示它们的类，但是我不想把它们放在一个巨大的巢下的同一个文件里。

这可能吗？

谢谢！

Answer 1

要完成此操作，您只需在&导入的文件中为选择器作序。

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

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

&.footer {
    color: blue;
}