如何通过mixin为SASS块添加特定作用域ID的前缀

Question

当我们有多个应用程序重用类名时，希望能够将应用程序范围id添加到我的sass文件中。

这样我就可以得到以下定义：

$app-scope-id: 'appOne';

然后在应用程序中写入我的SCSS

.blockName{
background: blue;
&__element{
color: orange;
}
}

然后叫一个混音器或其他什么来进行

@include prefixMixin(){
.blockName{
background: blue;
&__element{
color: orange;
}
}
}

然后渲染出css，比如：

.appOne-blockName{ background: blue; }
.appOne-blockName__element{ color: orange }

我知道我可以在块的开头使用插值，但我希望我可以在必要的时候通过一个mixin调用来保持它的整洁，如果我愿意的话，对整个SASS文件只调用一次。

Answer 1

我认为SASS不可能随心所欲。你也许可以这样做：

$app-scope-id: 'appOne';
@mixin prefix($selectorType: ".") {
@at-root {
#{$selectorType}#{$app-scope-id}-#{&} {
@content;
}
}
}
blockName {
@include prefix() {
background: blue;
&__element{
color: orange;
}
}
}

其编译为：

.appOne-blockName { background: blue; }
.appOne-blockName__element { color: orange; }

但是您仍然需要为每个需要前缀的选择器包含它。我不确定这是否可以称为"；"干净"；任何一个