Mixin для выбора селектора онлайн урок.


Нет простого способа определить селектор из его связанного набора правил. Квалификацией я имею в виду добавление имени элемента (например,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 tinkerers. Вы можете указать псевдоним, когда более описательное имя, например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;
}
}