Er is geen gemakkelijke manier om een selector te kwalificeren vanuit de bijbehorende regelset. Met kwalificatie bedoel ik het toevoegen van een elementnaam (bijv. a) Aan een klasse (bijv. .btn), Zodat een regelset specifiek wordt voor een combinatie van een elementenselector en een klassenelector (bijv. a.btn) Bijvoorbeeld.
Vanaf vandaag is de beste (en tot dusver enige geldige manier) om dit te doen als volgt:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Wauw, zeker niet echt elegant, toch? Idealiter zou je dit soort gruwelijke syntaxis achter een mixin willen verbergen, zodat je een schone en vriendelijke API behoudt, vooral als je beginnende ontwikkelaars in je team hebt.
Dit is natuurlijk heel eenvoudig:
/// 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; ) )Nu, ons vorige fragment herschrijven:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Veel beter, toch? Toch qualifykan het een beetje lastig klinken voor onervaren Sass-knutselaars. U kunt een alias opgeven als u een meer beschrijvende naam heeft, zoals when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Een laatste voorbeeld:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )