Допустим, вам нужно использовать определенный селектор в нескольких местах кода. Конечно, это не очень распространено, но кое-что случается. Повторяющийся код обычно дает возможность абстрагироваться. Абстрагировать значения в 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%; ) )Селекторы на карте
Возможно, ваша абстракция поддается ситуации с парой ключ / значение. Это карта в Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Вы можете использовать их по отдельности, например:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Или пропустите их:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Примеры
См. Раздел Pen Sass Variables for Selectors Криса Койера (@chriscoyier) на CodePen.