Не постоји једноставан начин квалификовања селектора унутар повезаног скупа правила. Под квалификацијом мислим на додавање имена елемента (нпр. a) У класу (нпр. .btn), Тако да скуп правила постаје специфичан за комбинацију селектора елемената и селектора класе (нпр. a.btn).
Од данас је најбољи (и до сада једини валидан начин) то учинити:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Вау, дефинитивно није баш елегантно, зар не? У идеалном случају, можда бисте желели да сакријете ову стравичну синтаксу иза комбинације тако да задржите чист и пријатељски АПИ, посебно ако у свом тиму имате програмере за почетнике.
То је изузетно једноставно, наравно:
/// 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; ) )Сада, преписујући наш претходни исечак:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Много боље, зар не? Ипак, qualifyможе звучати помало незгодно за неискусне Сасс тинкерере. Можете да додате псеудоним када описније име, на пример when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Последњи пример:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )