SCSS: 将多个类传递给mixin

Question

我经常使用混合器来存储代码块。例如：

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

- big_smile

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

- cimmanon

---

你能解释一下 @mixin ui-spot-badges($badges...) 中的 ... 吗？它是必要的吗？ - nu everest

我知道这是一个老问题，但其他人可能会发现它有用的是三个点告诉你这是一个参数列表。它为您提供了将任意数量的参数传递给mixin的可能性。 - miraco