萨斯：从一个变量

Question

我想创建像这样

$multi: foo, bar, baz 

与类变量和多类选择我要创建的组合选择，像这样：

.foo, .bar, .baz {} 

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

Answer 1

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

Answer 2

我有同样的问题，因为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 

您可能希望抽象列表到逗号分隔字符串功能集成到一个功能（注：上海社会科学院的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 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