可重复使用的功能/ mixin用于sass功能

Question

我想知道是否有一种简单的方法可以通过逗号分隔传递的信息来重新使用mixin？

示例，如果我想根据通过mixin传递的内容输出css。

MIXIN

@mixin generate($number...){
   .item-#{$number} {@content}
}

包含

@include generate(1, 2){color:red;} 

我希望输出：

.item-1 {color:red;}
.item-2 {color:red;}

示例2

@include generate(1, 5, 6){color:red;} 

哪个会输出：

.item-1 {color:red;}
.item-5 {color:red;}
.item-6 {color:red;}

这是我真正想要的非常简化版本，我不关心mixin的样子，或者它如何处理它，但我确实希望include看起来像这样{ {1}}。

三江源！

香农

Answer 1

基本用法

使用@each loop。

@mixin generate($numbers...){
  @each $number in $numbers {
   .item-#{$number} {@content;}
  }
}

@include generate(1, 2, 6);

演示：http://sassbin.com/gist/5999585/

高级用法

您可以使用@for loop同时拥有项目及其索引。此外，您可以使用列表列表为每个元素传递多个值：

=generate($items...)
  @for $i from 1 through length($items)
    $item: nth($items, $i)
    $offset: nth($item, 1)
    $color: nth($item, 2)

    .block-#{$i}
      margin-left: $offset
      background-color: $color

+generate(10 red, 20 green, 60 blue)

我已切换到缩进的.sass语法，以摆脱花括号和分号的滋扰。

演示：http://sassbin.com/gist/6007849/

预防

我希望你的例子是合成的。如果你在生产中使用它，你做错了！请改用extends：

%item { color: red};

.item-1, .item-2, .item-6 {
  @extend %item;
}

生成的CSS看起来会有所不同（更短但功能相同）：

.item-1, .item-2, .item-6 {
  color: red;
}

演示：http://sassbin.com/gist/5999603/