Bir seçiciyi ilişkili kural seti içinden nitelendirmenin kolay bir yolu yoktur. Nitelendirme ile , bir kural kümesinin, örneğin bir eleman seçici ve bir sınıf seçicinin (örneğin ) bir kombinasyonuna özgü olması için bir eleman adının (ör. a) Bir sınıfa (ör. .btn) Eklenmesini kastediyorum a.btn.
Bugün itibariyle, bunu yapmanın en iyi (ve şimdiye kadar tek geçerli yolu) aşağıdaki gibidir:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Vay canına, kesinlikle şık değil, değil mi? İdeal olarak, bu tür korkunç sözdizimini bir karışımın arkasına gizlemek isteyebilirsiniz, böylece özellikle ekibinizde çaylak geliştiriciler varsa temiz ve kolay bir API tutabilirsiniz.
Bunu yapmak elbette son derece basittir:
/// 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; ) )Şimdi, önceki pasajımızı yeniden yazıyoruz:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Çok daha iyi, değil mi? Yine de, qualifydeneyimsiz Sass tamircileri için biraz zor gelebilir. Gibi daha açıklayıcı bir ad olduğunda bir takma ad sağlayabilirsiniz when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Son bir örnek:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )