在scss中声明自定义选择器？

Question

例如，我想按属性ng-controller选择元素（如angularjs中所示）。我有一个div

<div ng-controller="foo1Ctrl"></div>
<div ng-controller="foo2Ctrl"></div>
<div ng-controller="foo3Ctrl"></div>

在scss中，我必须这样做：

[ng-controller="foo1Ctrl"] {}
[ng-controller="foo2Ctrl"] {}
[ng-controller="foo3Ctrl"] {}

生成我的作用域或嵌套的css。 我可以在scss中定义一些宏吗？

（以C形式，这将是沿着这条线的东西）

#DEFINE ng(x) [ng-controller="x"]

ng(foo1Ctrl) {}
ng(foo2Ctrl) {}
ng(foo3Ctrl) {}

我只是想知道scss是否有这方面的东西。如果它没有，那么我将只使用原始方法。

Answer 1

文档显示了您在Sass中可以执行的所有操作：http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

@mixin ng($value) {
    [ng-controller="#{$value}"] {
        @content;
    }
}

@include ng('asdf') {
    color: red;
}

输出：

[ng-controller="asdf"] {
  color: red;
}