Sass: выбор нескольких классов из переменной - PullRequest
Новая
       21

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

3 голосов
/ 31 января 2012

Я хочу создать переменную с классами вроде 

$multi: foo, bar, baz

И я хочу создать комбинированный селектор вот так: 

.foo, .bar, .baz {}

Я использовал отступный синтаксис (не знаю, имеет ли это значение). Причина, по которой я хочу, чтобы комбинированный селектор генерировался из переменной: мне нужно делать вычисления на основе того, сколько классов там определено. Пожалуйста, не предлагайте что-то вроде (используйте extends!), Потому что это потребует от меня еще одного занятия. Мне нужно быть в состоянии приблизиться или точно к обычному комбинированному выходу селектора.

Ответы [ 3 ]

2 голосов
/ 24 июля 2013

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

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

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

...