Няма лесен начин да се квалифицира селектор от свързания с него набор от правила. Под квалификация имам предвид добавянето на име на елемент (например 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може да звучи малко сложно за неопитни майстори на Сас. Можете да предоставите псевдоним, когато има по-описателно име, като 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; ) )