tutorial - En Sass, ¿cómo hace referencia al selector principal y excluye a cualquier abuelo?

sass vs css

Question

Tengo el siguiente código sass:

.class{
label{
color:#fff;
.disabled &{color:#333; }
}
}

que salidas

.disabled .class label

¿Hay alguna manera de generar el selector principal sin incluir selectores de abuelos? Al igual que:

.disabled label

Answer 1

No hay manera de que yo sepa en SASS para escoger y elegir entre los selectores de antepasados ​​cuando se utiliza una referencia principal. Sin embargo, con su código, una pequeña reorganización puede obtener el mismo resultado:

label {
.class & {
color: #fff;
}
.disabled & {
color:#333;
}
}

Compila para:

.class label {
color: #fff; }
.disabled label {
color: #333; }

Answer 2

El selector principal siempre es una referencia a todo el selector resuelto del nivel previo de anidamiento. No existe el concepto de "padre" o "abuelo", especialmente cuando concatenan selectores o usan el selector de padres al final que enturbia el agua.

Descargo de responsabilidad: no recomiendo hacer esto a menos que realmente lo necesite .

Comenzando con Sass 3.4, puede extraer porciones de un selector usando & como una variable. Cuando se utiliza de esta manera, obtendrá una lista de cadenas de caracteres (que pueden enrutarse, etc.).

Extrayendo una parte o porción de un selector

Esta función usa el mismo estilo de argumentos que la función de corte de cadena:

@function selector-slice($sel, $start: 1, $end: -1) {
$collector: ();
@each $s in $sel {
// calculate our true start and end indices when given negative numbers
$_s: if($start > 0, $start, length($s) + $start + 1);
$_e: if($end > 0, $end, length($s) + $end + 1);
$c: ();
@for $i from $_s through $_e {
$c: append($c, nth($s, $i));
}
// prevent duplicates from creeping in
@if not index($collector, $c) {
$collector: append($collector, $c);
}
}
@return $collector;
}
/* complex example */
.one-a, .one-b {
two {
three {
color: red;
&:before {
@at-root #{selector-slice(&, 2, 3)} {
color: green;
}
}
}
}
}
/* your example */
.class {
label {
color:#fff;
@at-root #{selector-slice(&, -1, -1)} {
.disabled & {
color:#333;
}
}
}
}

Salida:

/* complex example */
.one-a two three, .one-b two three {
color: red;
}
two three:before {
color: green;
}
/* your example */
.class label {
color: #fff;
}
.disabled label {
color: #333;
}

Como una ventaja adicional, puede usar esta función para invertir el orden de los selectores pasando el índice más grande antes que el más pequeño.

.one-a, .one-b {
two {
three {
color: red;
&:before {
@at-root #{selector-slice(&, 3, 2)} {
color: green;
}
}
}
}
}

Salida:

.one-a two three, .one-b two three {
color: red;
}
three:before two {
color: green;
}

Relacionado: Modificar el medio de un selector en Sass (agregar / eliminar clases, etc.)

Reemplazar una clase con otra

Alternativamente, puede usar la función selector-replace de la biblioteca estándar si lo que desea hacer es reemplazar una clase por otra.

.class {
label {
color:#fff;
@at-root #{selector-replace(&, ''.class'', ''.disabled'')} {
color:#333;
}
}
}

Salida:

.class label {
color: #fff;
}
.disabled label {
color: #333;
}