Povedzme, že musíte v kóde použiť určitý selektor na viacerých miestach. Nie je to nijako ohromne bežné, ale veci sa dejú. Opakovaný kód je zvyčajne príležitosťou na abstrakciu. Abstrahovanie hodnôt v programe Sass je jednoduché, ale selektory sú o niečo zložitejšie.
Jedným zo spôsobov, ako to urobiť, je vytvoriť selektor ako premennú. Tu je príklad selektora oddeleného zoznamu selektorov:
$selectors: " .module, body.alternate .module ";Ak to chcete použiť, musíte premeniť premennú, napríklad takto:
#($selectors) ( background: red; )Funguje to aj s vnorením:
.nested ( #($selectors) ( background: red; ) )Predpona
Premenná môže byť tiež iba časťou selektora, napríklad predpona.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Môžete tiež použiť vnorenie na prefixovanie:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selektory na mape
Možno sa vaša abstrakcia hodí k situácii páru kľúč / hodnota. To je mapa v Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Môžete ich použiť jednotlivo ako:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Alebo ich pretiahnite:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Príklady
Prezrite si Pen Sass Variables for Selectors od Chrisa Coyiera (@chriscoyier) na CodePen.