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