No existe una forma sencilla de calificar un selector desde su conjunto de reglas asociado. Al calificar me refiero a anteponer un nombre de elemento (por ejemplo a) a una clase (por ejemplo .btn) para que un conjunto de reglas sea específico para una combinación de un selector de elementos y un selector de clases (por ejemplo a.btn).
A partir de hoy, la mejor (y hasta ahora la única forma válida) de hacerlo es la siguiente:
.button ( @at-root a#(&) ( // Specific styles for `a.button` ) )Vaya, definitivamente no es muy elegante, ¿verdad? Idealmente, es posible que desee ocultar este tipo de sintaxis horrible detrás de un mixin para mantener una API limpia y amigable, especialmente si tiene desarrolladores novatos en su equipo.
Por supuesto, hacerlo es extremadamente simple:
/// 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; ) )Ahora, reescribiendo nuestro fragmento anterior:
.button ( @include qualify(a) ( // Specific styles for `a.button` ) )Mucho mejor, ¿verdad? Aún así, qualifypuede sonar un poco complicado para los manipuladores de Sass sin experiencia. Puede proporcionar un alias cuando un nombre más descriptivo, como when-is.
/// @alias qualify @mixin when-is($args… ) ( @include qualify($args… ) ( @content; ) )Un último ejemplo:
.button ( border: none; // Qualify `.button` with `button` @include qualify(button) ( -webkit-appearance: none; ) // Qualify `.button` with `a` @include when-is(a) ( text-decoration: none; ) )