SASS mixin - hot to limit to a certain type of tag? -
this question has answer here:
@mixin foobar(){ outline: 1px solid red; td#{&}{ outline: 1px solid blue; } } .foo{ @include foobar; }
outputs :
.foo { outline: 1px solid red; } .foo td.foo { outline: 1px solid blue; }
i output :
.foo { outline: 1px solid red; } td.foo { outline: 1px solid blue; }
how can achieved ? played "@at-root" doesn't seem meant that.
i can see 2 ways here. complex one:
@mixin foobar($class, $tags...) { @each $tag in $tags { $selector: $tag + $class; @at-root #{$selector} { outline: 1px solid blue; } } } .bar { @include foobar(&, 'tr', 'td'); }
output:
tr.bar { outline: 1px solid blue; } td.bar { outline: 1px solid blue; }
and easy one:
%abs_foo { outline: 1px solid blue; } .foo { @at-root td#{&} { @extend %abs_foo; } @extend %abs_foo; }
with output:
.foo, td.foo { outline: 1px solid blue; }
i have created gist you: http://sassmeister.com/gist/361cd515562035b0ffa7
Comments
Post a Comment