Sass: селектор нескольких классов из переменной

У меня была та же проблема, что и у ОП, и это был первый результат поиска, который я нашел, поэтому теперь, когда я в этом разобрался, я опубликую свое решение, хотя вопросу уже 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

(код из предыдущего ответа) Классная функция! Полезно. Я просто хотел добавить немного синтаксиса 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

Компас предлагает встроенный миксин спрайтов, который делает именно это. Если вы этого не сделаете, хотите использовать весь Compass, вы можете заглянуть в их исходный код, чтобы узнать, как они это делают.