Используйте переменную Sass для селектора онлайн урок.


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

Один из способов сделать это - создать селектор в качестве переменной. Вот пример, который представляет собой список селекторов, разделенных запятыми:

$selectors: "
.module,
body.alternate .module
";

Затем, чтобы использовать это, вы должны интерполировать переменную, например:

#{$selectors} {
background: red;
}

Это также работает с гнездом:

.nested {
#{$selectors} {
background: red;
}
}

# Префикс

Переменная может также быть толькочастьюселектора, как префикс.

$prefix: css-tricks-;

.#{$prefix}button {
padding: 0.5rem;
}

Вы также можете использовать вложенность для префикса:

.#{$prefix} {
&module {
padding: 1rem;
}
&header {
font-size: 110%;
}
&footer {
font-size: 90%;
}
}

# Селекторы на карте

Возможно, ваша абстракция поддается паре с ключевыми значениями. Это карта в Сасс.

$selectorMap: (
selectorsFoo: ".module",
selectorsBar: ".moodule-2"
);

Вы можете использовать их индивидуально, например:

#{map-get($selectorMap, selectorsFoo)} {
padding: 1rem;
}

Или проведите через них:

@each $selectorName, $actualSelector in $selectorMap {
#{$actualSelector} {
padding: 1rem;
}
}

# Примеры