Não há uma maneira fácil de qualificar um seletor a partir de seu conjunto de regras associado. Por qualificação, quero dizer anexar um nome de elemento (por exemplo a) a uma classe (por exemplo .btn) para que um conjunto de regras seja específico para uma combinação de um seletor de elemento e um seletor de classe (por exemplo a.btn).
A partir de hoje, a melhor (e até agora única forma válida) de fazer isso é a seguinte:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Uau, definitivamente não é muito elegante, não é? Idealmente, você pode querer esconder esse tipo de sintaxe horrível atrás de um mixin para manter uma API limpa e amigável, especialmente se você tiver desenvolvedores novatos em sua equipe.
Fazer isso é extremamente simples, claro:
/// 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; ) )Agora, reescrevendo nosso snippet anterior:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Muito melhor, certo? Ainda assim, qualifypode soar um pouco complicado para experientes experientes em Sass. Você pode fornecer um alias quando um nome mais descritivo, como when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Um exemplo final:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )