Рецимо да требате користити одређени селектор на више места у коду. Није сигурно, али сигурно се дешава. Поновљени код је обично прилика за апстракцију. Апстраховање вредности у Сасс-у је лако, али селектори су мало сложенији.
Један од начина да то направите је да креирате свој селектор као променљиву. Ево примера који је листа селектора одвојена зарезима:
$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; ) )Примери
Погледајте променљиве Пен Сасс за селекторе Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.