Function 可重用函数/sass函数的mixin

我想知道是否有一种简单的方法可以通过逗号分隔传递的信息来重用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看起来像这样

@include-generate（1,2,6,5）{color:red；}

谢谢

香农

基本用法 使用

演示：

高级用法 您可以使用来同时拥有项及其索引。此外，还可以使用列表列表为每个元素传递多个值：

=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

语法来消除大括号和分号

演示：

预防措施 我希望你的例子是综合的。如果你在生产中这样使用它，你就做错了！改用：

生成的CSS将不同（较短但功能相同）：

演示：

基本用法 使用

演示：

高级用法 您可以使用来同时拥有项及其索引。此外，还可以使用列表列表为每个元素传递多个值：

=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

语法来消除大括号和分号

演示：

预防措施 我希望你的例子是综合的。如果你在生产中这样使用它，你就做错了！改用：

生成的CSS将不同（较短但功能相同）：

---

演示：

正如我在示例中提到的，它是我想要的非常简化的版本：）它实际上是为高级网格生成媒体奇观，但非常感谢！嘿@ShannonHochkins，对于媒体查询，请看，我正在创建我自己的插件伴侣，但不仅仅是断点，而且要生成网格css，它将是非常棒的插件：）看看它是如何与断点和断点切片器集成的。我以前看过，我所做的我相信更容易使用，完成后，我将链接到您进行审阅；）正如我在示例中提到的，这是我想要的非常简化的版本：）它实际上是为高级网格生成媒体皇后，但非常感谢！嘿@ShannonHochkins，对于媒体查询，请看，我正在创建我自己的插件伴侣，但不仅仅是断点，而且要生成网格css，它将是非常棒的插件：）看看它是如何与断点和断点切片器集成的。我以前看过，我所做的我相信更容易使用，完成后，我将链接到您进行审阅；）

%item { color: red};

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

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