Кажете, че трябва да използвате определен селектор на няколко места в кода си. Не е изключително често, разбира се, но се случват неща. Повтарящият се код обикновено е възможност за абстракция. Абстрахирането на стойности в 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; ) )Примери
Вижте променливите Pen Sass за селектори от Chris Coyier (@chriscoyier) на CodePen.