sass - 如何组合在循环中创建的一系列 sass 类

Question

我正在使用 SASS 从传递到 mixin 的变量中构造一系列类。

@mixin classes($key, $num) {
    @for $i from 1 through $num {
         [class*=#{$key}-#{$i}] { 
                @content
         }
    }
}

@include classes(grid, 8) {
    width:100px;
}

它目前使类像我想要的那样，但都是8个单独的类（在@contents中是相同的。有没有办法将它们合并在一起，所以我得到：

[class*=grid-1],
[class*=grid-2],
....
[class*=grid-8],
{
 width:100px;
}

我不确定是否有可能做到这一点？任何指针将不胜感激。

谢谢，

卡尔

Answer 1

我终于找到了答案

$classes: ();
@for $i from 1 through $cols {
    $classes: join($classes, unquote("#{$prefix}#{$i} "), comma);
}


#{$classes} {
    float: left;
    margin-right: $gutterPercent;
    width: $columnWidth;
}