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 がこの線に沿って何かを持っているのだろうかと思います。ない場合は、元の方法を使用します。

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;
}