SCSS: Pass multiple classes to a mixin

Question

I often use mixins to store chunks of code. For 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 I pass in more than one class into the mixin. E.g.

  @include ui-spot-badges(myclass, myclass2); 

to get

.myclass, myclass2 {
  position:relative; 
}

.myclass:after, .myclass2:after {
    content:""; 
position:absolute;
background:red;
}

Answer 1

The most efficient way to do it would be to pass your list of selectors as a string:

@include ui-spot-badges('.myclass, .myclass2');

Otherwise, you have to do some looping to get the 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;
}