Kodunuzun birden çok yerinde belirli bir seçici kullanmanız gerektiğini varsayalım. Elbette çok yaygın değil, ama işler oluyor. Tekrarlanan kod tipik olarak bir soyutlama fırsatıdır. Sass'ta değerleri soyutlamak kolaydır, ancak seçiciler biraz daha zordur.
Bunu yapmanın bir yolu, seçicinizi bir değişken olarak oluşturmaktır. Virgülle ayrılmış seçiciler listesi olan bir örnek:
$selectors: " .module, body.alternate .module ";Sonra bunu kullanmak için değişkeni şu şekilde enterpolasyon yapmanız gerekir:
#($selectors) ( background: red; )Bu, yuvalama için de işe yarar:
.nested ( #($selectors) ( background: red; ) )Önek
Bir değişken ayrıca bir önek gibi bir seçicinin yalnızca bir parçası olabilir.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )İç içe yerleştirmeyi de ön ek yapmak için kullanabilirsiniz:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Bir Haritadaki Seçiciler
Belki de soyutlamanız kendisini bir anahtar / değer çifti durumuna borçludur. Bu Sass'ta bir harita.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Bunları ayrı ayrı şu şekilde kullanabilirsiniz:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Veya aralarında döngü yapın:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Örnekler
CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Seçiciler için Pen Sass Değişkenlerine bakın.