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

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

$multi: foo, bar, baz

我想创建一个组合选择器，如下所示：

.foo, .bar, .baz {}

---

我使用缩进语法（不知道这是否重要）。我希望从变量生成组合选择器的原因是：我需要根据其中定义的类的数量进行计算。请不要给出像（使用扩展！）这样的建议，因为这将需要我创建另一个类。我需要能够接近或完全接近常规组合选择器输出。

如果您不想使用所有Compass，您可以查看他们是如何操作的。

我遇到了与OP相同的问题，这是我找到的第一个搜索结果，所以现在我已经找到了，我将发布我的解决方案，尽管这个问题已经有1.5年了

我发现：为了使用变量作为选择器，可以使用SASS，它可以完美地处理逗号分隔的字符串。但是，如果您希望保存选择器的变量是

列表

（以便您可以在其上使用列表函数，例如

长度（$multi）

），则插值将生成格式不正确的选择器

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

$multi:“.foo”、“.bar”、“.baz”
$multi-selector:“
@$multi中的每个$selector
@如果$multi selector！=""
$multi-selector:$multi-selector+“，”
$multi-selector:$multi-selector+$selector
#{$multi-selector}
//CSS属性在这里

您可能希望将列表以逗号分隔的字符串功能抽象为一个函数（注意：SASS的函数不这样做；它将两个列表合并为一个新列表）。下面是一个可能的实现：

@函数联合（$list，$glue:“，”）
@如果长度（$list）==1
@返回$list
$string:“
@$list中的每个$item
@如果$string！=""
$string:$string+glue
$string:$string+item
@返回$string

在这一点上，原始代码可以简洁到：

$multi:“.foo”、“.bar”、“.baz”
#{unite（$multi）}
//CSS属性在这里

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

@函数联合（$list，$glue:“，”）{
@如果长度（$list）==1{
@返回$list；
}@else{
$string:“”；
@$list中的每个$item{
@如果$string！=''{$string:$string+$glue；}
$string:$string+item；
}
@返回$string；
}
}

在这一点上，原始代码可以简洁到：

$multi:“.foo”、“.bar”、“.baz”
#{unite（$multi）}
//CSS属性在这里

如果您指定了需要执行的“计算”，则会更有帮助。请解释为什么您需要“接近或精确地接近常规组合选择器输出”这些类是用于精灵的。。。。所以我有一个精灵，它有一个foo，bar和baz部分的图像。我有一个循环，将第一个类设置为特定的背景，然后最后一个循环在第一个停止的地方继续，基本上按顺序处理spring，而不必手动管理它。现在我必须定义变量设置，然后手动指定组合选择器，因为Sass不允许我做我想做的事情。很抱歉编辑您的答案，我想它会复制您的答案和我的更改。所以请否认这些改变，因为我已经删掉了你答案的第一部分，这非常有帮助。我发现sass从不允许一个人轻松地做任何事情，除非它是非常简单的基础。