css - SCSS : Pass multiple classes to a mixin

Question

我经常使用 mixins 来存储代码块。例如:

   @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); 

我如何将多个类传递到 mixin 中。例如。

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

得到

.myclass, myclass2 {
  position:relative; 
}

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

Answer 1

最有效的方法是将选择器列表作为字符串传递:

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

否则，您必须进行一些循环才能正确生成选择器。

@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);

输出:

.a, .b {
  position: relative;
}
.a:after, .b:after {
  content: "";
  position: absolute;
  background: red;
}