Нет простого способа квалифицировать селектор из связанного с ним набора правил. Под квалификацией я подразумеваю добавление имени элемента (например a) к классу (например .btn), чтобы набор правил стал, например, специфичным для комбинации селектора элемента и селектора класса (например a.btn).
На сегодняшний день лучший (и пока единственный действительный способ) сделать это следующим образом:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Вау, определенно не очень элегантно, правда? В идеале вы можете захотеть скрыть этот ужасный синтаксис за миксином, чтобы сохранить чистый и дружелюбный API, особенно если в вашей команде есть разработчики-новички.
Конечно, сделать это очень просто:
/// 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может показаться немного сложным для неопытных мастеров Sass. Вы можете указать псевдоним, если имя будет более наглядным, например 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; ) )