Tidak ada cara mudah untuk mengkualifikasikan pemilih dari dalam kumpulan aturan yang terkait. Yang saya maksud dengan kualifikasi adalah memasukkan nama elemen (misalnya a) ke kelas (misalnya .btn) sehingga seperangkat aturan menjadi spesifik untuk kombinasi pemilih elemen dan pemilih kelas (misalnya a.btn) misalnya.
Saat ini, cara terbaik (dan sejauh ini satu-satunya cara yang valid) untuk melakukannya adalah sebagai berikut:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wah, pasti tidak elegan banget ya? Idealnya, Anda mungkin ingin menyembunyikan sintaksis mengerikan semacam ini di belakang mixin sehingga Anda tetap memiliki API yang bersih dan ramah, terutama jika Anda memiliki pengembang pemula di tim Anda.
Melakukannya tentu saja sangat sederhana:
/// Since the current way to qualify a class from within its ruleset is quite /// ugly, here is a mixin providing a friendly API to do so. /// @author Hugo Giraudel /// @param (String) $element-selector - Element selector @mixin qualify($element-selector) ( @at-root #($element-selector + &) ( @content; ) )Sekarang, menulis ulang cuplikan kita sebelumnya:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Jauh lebih baik, bukan? Tetap saja, qualifybisa terdengar agak rumit bagi pengotak-atik Sass yang tidak berpengalaman. Anda dapat memberikan alias jika nama yang lebih deskriptif, seperti when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Satu contoh terakhir:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )