Tegyük fel, hogy egy adott választót több helyen kell használnia a kódban. Az biztos, hogy nem rendkívül gyakori, de ilyesmi megtörténik. Az ismételt kód általában az absztrakció lehetősége. Az értékek elvonatkoztatása a Sass-ban egyszerű, de a kiválasztók kissé bonyolultabbak.
Ennek egyik módja az, hogy létrehozza a választót változóként. Íme egy példa, amely vesszővel elválasztott választók listája:
$selectors: " .module, body.alternate .module ";Majd ennek használatához interpolálni kell a változót, így:
#($selectors) ( background: red; )Ez működik a fészkeléssel is:
.nested ( #($selectors) ( background: red; ) )Előtagolás
A változó szintén csak egy választó része lehet, például egy előtag.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Használhatja a fészkelést az előtagozáshoz is:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Válogatók a térképen
Talán az absztrakciója kulcs / értékpár helyzethez alkalmazkodik. Ez egy térkép Sassban.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Használhatja őket egyenként, például:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Vagy hurok át rajtuk:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Példák
Lásd Chris Coyier (@chriscoyier) Pen Sass változói a választók számára a CodePen-en.