Non esiste un modo semplice per qualificare un selettore dall'interno del set di regole associato. Per qualificazione intendo anteporre un nome di elemento (ad esempio a) a una classe (ad esempio .btn) in modo che un set di regole diventi specifico per una combinazione di un selettore di elementi e un selettore di classe (ad esempio a.btn) per esempio.
Ad oggi, il modo migliore (e finora l'unico valido) per farlo è il seguente:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wow, decisamente non proprio elegante, vero? Idealmente, potresti voler nascondere questo tipo di orribile sintassi dietro un mixin in modo da mantenere un'API pulita e amichevole, specialmente se hai sviluppatori principianti nel tuo team.
Farlo è ovviamente estremamente semplice:
/// 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; ) )Ora, riscrivendo il nostro frammento precedente:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Molto meglio, vero? Tuttavia, qualifypuò sembrare un po 'complicato per gli smanettoni Sass inesperti. Puoi fornire un alias quando un nome più descrittivo, come when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Un ultimo esempio:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )