CODEWITHSUNDEEP
csssass
big_smile
big_smile

Reputation: 1523

SCSS: Pass multiple classes to a mixin

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;
}

Upvotes: 4

Views: 4452

Answers (1)

cimmanon
cimmanon

Reputation: 68319

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;
}

Upvotes: 6

Related Questions