Załóżmy, że musisz użyć określonego selektora w wielu miejscach w kodzie. Z pewnością nie jest to zbyt powszechne, ale coś się dzieje. Powtarzający się kod jest zazwyczaj okazją do abstrakcji. Abstrakcja wartości w Sassie jest łatwa, ale selektory są nieco trudniejsze.
Jednym ze sposobów jest utworzenie selektora jako zmiennej. Oto przykład będący listą selektorów oddzielonych przecinkami:
$selectors: " .module, body.alternate .module ";Następnie, aby tego użyć, musisz interpolować zmienną w następujący sposób:
#($selectors) ( background: red; )Działa to również z zagnieżdżaniem:
.nested ( #($selectors) ( background: red; ) )Przedrostki
Zmienna może być również tylko częścią selektora, na przykład przedrostkiem.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Możesz również użyć zagnieżdżenia, aby wykonać prefiksowanie:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Selektory na mapie
Być może twoja abstrakcja nadaje się do sytuacji w parze klucz / wartość. To mapa w Sassie.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Możesz ich używać indywidualnie, jak:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Lub przejrzyj je:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Przykłady
Zobacz zmienne Pen Sass dla selektorów autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.