css - Sass:来自变量的多类选择器

Question

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

$multi: foo, bar, baz

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

.foo, .bar, .baz {}

我使用的是缩进语法(不知道这是否重要)。我想要从变量生成组合选择器的原因:我需要根据那里定义了多少个类来进行计算。请不要给出像(使用扩展!)这样的建议，因为那将需要我再上一个类。我需要能够接近或完全接近常规的组合选择器输出。

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

您可能希望将列表到逗号分隔字符串的功能抽象为一个函数(注意: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