Katakan anda perlu menggunakan pemilih tertentu di beberapa tempat dalam kod anda. Memang tidak biasa, tetapi perkara berlaku. Kod berulang biasanya merupakan peluang untuk pengambilan. Mengaburkan nilai di Sass memang mudah, tetapi pemilih sedikit lebih sukar.
Salah satu cara untuk melakukannya adalah dengan membuat pemilih anda sebagai pemboleh ubah. Berikut adalah contoh senarai pemilih yang dipisahkan dengan koma:
$selectors: " .module, body.alternate .module ";Kemudian untuk menggunakannya, anda harus menginterpolasi pemboleh ubah, seperti ini:
#($selectors) ( background: red; )Itu juga berfungsi dengan bersarang:
.nested ( #($selectors) ( background: red; ) )Awalan
Pemboleh ubah juga boleh menjadi bahagian pemilih, seperti awalan.
$prefix: css-tricks-; .#($prefix)button ( padding: 0.5rem; )Anda juga boleh menggunakan sarang untuk melakukan awalan:
.#($prefix) ( &module ( padding: 1rem; ) &header ( font-size: 110%; ) &footer ( font-size: 90%; ) )Pemilih dalam Peta
Mungkin pengabaian anda sesuai dengan situasi pasangan kunci / nilai. Itu peta di Sass.
$selectorMap: ( selectorsFoo: ".module", selectorsBar: ".moodule-2" );Anda boleh menggunakannya secara berasingan seperti:
#(map-get($selectorMap, selectorsFoo)) ( padding: 1rem; )Atau gelung melalui mereka:
@each $selectorName, $actualSelector in $selectorMap ( #($actualSelector) ( padding: 1rem; ) )Contoh
Lihat Pembolehubah Pen Sass untuk Pemilih oleh Chris Coyier (@chriscoyier) di CodePen.