Neexistuje snadný způsob, jak kvalifikovat selektor z jeho přidružené sady pravidel. Kvalifikací mám na mysli prepending názvu prvku (např. a) Do třídy (např. .btn), Aby se sada pravidel stala specifickou například pro kombinaci selektoru prvků a selektoru tříd (např. a.btn).
Od dnešního dne je nejlepší (a zatím jediný platný způsob), jak to udělat, následující:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Páni, rozhodně ne opravdu elegantní, že? V ideálním případě možná budete chtít skrýt tento druh děsivé syntaxe za mixin, abyste udrželi čisté a přátelské API, zvláště pokud máte ve svém týmu nováčkovské vývojáře.
Je to samozřejmě velmi jednoduché:
/// 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; ) )Nyní přepisujeme náš předchozí úryvek:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Mnohem lepší, že? Přesto qualifymůže pro nezkušené drotáře Sass znít trochu složitě. Alias můžete uvést, pokud máte popisnější název, například when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Jeden poslední příklad:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )