css - SCSS: Pass multiple classes to a mixin -
i use mixins store chunks of code. example:
@mixin ui-spot-badges($ui-spot-badges: ui-spot-badges) { .#{$ui-spot-badges} { position:relative; @content; &:after { content:""; position:absolute; background:red; } } } @include ui-spot-badges(myclass);
how can pass in more 1 class mixin. e.g.
@include ui-spot-badges(myclass, myclass2);
to
.myclass, myclass2 { position:relative; } .myclass:after, .myclass2:after { content:""; position:absolute; background:red; }
the efficient way pass list of selectors string:
@include ui-spot-badges('.myclass, .myclass2');
otherwise, have looping selector generated properly.
@mixin ui-spot-badges($badges...) { $selectors: (); @each $b in $badges { $selectors: append($selectors, unquote('.#{$b}'), comma); } #{$selectors} { position:relative; @content; &:after { content:""; position:absolute; background:red; } } } @include ui-spot-badges(a, b);
output:
.a, .b { position: relative; } .a:after, .b:after { content: ""; position: absolute; background: red; }
Comments
Post a Comment