Sass：来自变量的多个类选择器

Question

我想用这样的类创建一个变量

$multi: foo, bar, baz

我想创建一个像这样的组合选择器：

.foo, .bar, .baz {}

我使用缩进语法（不知道这是否重要）。我想要从变量生成组合选择器的原因是：我需要根据那里定义的类数量进行计算。请不要给出类似（使用扩展！）的建议，因为这将需要我再上一堂课。我需要能够接近或完全接近常规组合选择器输出。

Answer 1

我和OP有同样的问题，这是我找到的第一个搜索结果，所以现在我已经弄清楚了，我将发布我的解决方案，即使这个问题已经有1.5年的历史了。

这是我发现的：为了使用变量作为选择器，您可以使用 SASS 插值，它与逗号分隔的字符串完美配合。但是，如果您希望保存选择器的变量是一个 list （以便您可以在其上使用列表函数，例如 length($multi)），则插值将生成一个格式错误的选择器。

因此，简单的解决方案是首先将变量定义为列表，然后当您需要将其用作选择器时，将该列表转换为逗号分隔的字符串：

$multi: ".foo", ".bar", ".baz"
$multi-selector: ""
@each $selector in $multi
    @if $multi-selector != ""
        $multi-selector: $multi-selector + ", "
    $multi-selector: $multi-selector + $selector

#{$multi-selector}
    //CSS properties go here

您可能希望将列表抽象为逗号分隔的-将字符串功能转换为函数（注意：SASS 的 join 函数不会执行此操作；它将两个列表连接到一个新列表中）。这是一种可能的实现：

@function unite($list, $glue: ", ")
    @if length($list) == 1
        @return $list

    $string: ""
    @each $item in $list
        @if $string != ""
            $string: $string + $glue
        $string: $string + $item
    @return $string

此时原始代码可以简洁为：

$multi: ".foo", ".bar", ".baz"

#{unite($multi)}
    //CSS properties go here

Answer 2

（之前答案中的代码）很酷的功能！有用的。我只是想添加一些SCSS语法，给人们一个使用它的机会：

@function unite($list, $glue: ", ") {
     @if length($list) == 1 {
             @return $list;
     } @else {
        $string: "";
        @each $item in $list {
             @if $string != "" { $string: $string + $glue; }
                 $string: $string + $item;
     }

     @return $string;
     }
}

此时原始代码可以简洁为：

$multi: ".foo", ".bar", ".baz"

#{unite($multi)}
    //CSS properties go here

Answer 3

Compass 提供了一个内置的 sprite mixin，可以实现此目的。 如果您不这样做想要使用 Compass 的全部内容，您可以查看他们的源代码以了解他们是如何做到这一点的。