sass - 在 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 是否确实有这方面的东西。如果没有，那我就用原来的方法。

score 3 · Accepted Answer

该文档几乎显示了您可以在 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;
}

1 回答 1