Katakanlah Anda perlu menggunakan pemilih tertentu di banyak tempat dalam kode Anda. Ini tidak terlalu umum, tapi banyak hal terjadi. Kode berulang biasanya merupakan kesempatan untuk abstraksi. Mengabstraksi nilai di Sass itu mudah, tetapi penyeleksi sedikit lebih rumit.
Salah satu cara untuk melakukannya adalah dengan membuat selektor Anda sebagai variabel. Berikut adalah contoh daftar pemilih yang dipisahkan koma:
$selectors: " .module, body.alternate .module ";
Kemudian untuk menggunakannya, Anda harus melakukan interpolasi variabel, seperti ini:
#($selectors) ( background: red; )
Itu bekerja dengan bersarang juga:
.nested ( #($selectors) ( background: red; ) )
Awalan
Variabel juga hanya bisa menjadi bagian dari selektor, seperti awalan.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )
Anda juga bisa menggunakan bersarang untuk melakukan awalan:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )
Penyeleksi di Peta
Mungkin abstraksi Anda cocok untuk situasi pasangan kunci / nilai. Itu peta di Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );
Anda dapat menggunakannya secara individual seperti:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )
Atau putar melalui mereka:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )
Contoh
Lihat Variabel Pena Sass untuk Selektor oleh Chris Coyier (@chriscoyier) di CodePen.