1

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

例如，如果我想根据通过 mixin 传递的东西的数量来输出 css。

米心

@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 generate(1,2,6,5){color:red;}。

谢谢！

香农

4

1 回答 1

1

基本用法

使用@each 循环。

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

@include generate(1, 2, 6);

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

高级用法

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

=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/

预防

我希望你的例子是合成的。如果你在生产中这样使用它，那你就错了！改用扩展：

%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/

于 2013-07-15T12:31:15.357 回答