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

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -