Question

我希望进一步开发这个mixin，所以我可以通过mixin传递多个争论，而不必每次都重新创建包含：

不是这样：

@include main-container(red);
@include main-container(blue);

但是：

@include main-container(red, blue);

当前代码

@mixin main-container-bg($name){
    &.#{$name}-bg{
        background:url("/images/"#{$name}"-angle-bg.png") center 78px no-repeat;
    }
}

我相信我需要在每个语句旁边使用for语句循环我的mixin，尽管后面的@sslude中的所有参数都在scss中。

任何想法？

欢迎任何帮助。

-Neil

Answer 1

您可以使用@each指令并以这种方式将列表传递给mixin

@mixin main-container-bg($listcolours) {

  @each $colour in $listcolours {
    &.#{$colour}-bg{
      background:url(/images/#{$colour}-angle-bg.png) center 78px no-repeat;
    }  
  }

}


div {
  @include main-container-bg((red, blue));
}

生成的CSS是

div.red-bg {
  background: url(/images/red-angle-bg.png) center 78px no-repeat;
}
div.blue-bg {
  background: url(/images/blue-angle-bg.png) center 78px no-repeat;
}

SCSS调用Mixin而不重复

1 个答案: