CODEWITHSUNDEEP
sass
user1542639
user1542639

Reputation: 597

Declare a custom selector in scss?

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

Answers (1)

cimmanon
cimmanon

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

Related Questions