Reputation: 597
For example, I want to select element by attribute ng-controller
(as in angularjs). I have a div with
<div ng-controller="foo1Ctrl"></div>
<div ng-controller="foo2Ctrl"></div>
<div ng-controller="foo3Ctrl"></div>
In scss, I would have to do:
[ng-controller="foo1Ctrl"] {}
[ng-controller="foo2Ctrl"] {}
[ng-controller="foo3Ctrl"] {}
To produce my scoped or nested css. Is it possible for me to define some macro in scss?
(In C form, it would be something along this line)
#DEFINE ng(x) [ng-controller="x"]
ng(foo1Ctrl) {}
ng(foo2Ctrl) {}
ng(foo3Ctrl) {}
I just wonder if scss do have something along this line. If it doesn't have one, then I'll just use the original method.
Upvotes: 2
Views: 1925
Reputation: 68349
The documentation shows pretty much everything you can do in 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;
}
Output:
[ng-controller="asdf"] {
color: red;
}
Upvotes: 3