Question

我想用类似

的类创建一个变量

$multi: foo, bar, baz

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

.foo, .bar, .baz {}

我使用了缩进语法（不知道这是否重要）。我想要从变量生成组合选择器的原因：我需要根据在那里定义了多少个类来进行计算。请不要给出类似的建议（使用extends！），因为这需要我做另一个课程。我需要能够接近或完全接近常规组合选择器输出。

Answer 1

我和OP有同样的问题，这是我找到的第一个搜索结果，所以现在我已经弄明白了，我会发布我的解决方案，即使问题是1.5岁。

这是我发现的：为了使用变量作为选择器，你使用SASS interpolation，它与逗号分隔的字符串完美配合。但是，如果您希望包含选择器的变量为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

您可能希望将list-to-逗号分隔字符串功能抽象为函数（注意：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

Compass offers a built-in sprite mixin that does just this.如果您不想使用所有指南针，可以look into their source查看他们是如何做的。

Answer 3

（上一个回答的代码）酷功能！有用。我只是想添加一些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

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

3 个答案: