Combinación de selectores en SASS
A veces necesitamos que, al compilar estructuras anidadas, estas se unan de forma continua y no con un espacio. Para ello, es necesario colocar un ampersand antes del nombre del selector anidado:
div {
&.block {
width: 300px;
}
}
Como resultado, después de la compilación obtendremos el siguiente código:
div.block {
width: 300px;
}
Explica cuál será el resultado de la compilación del siguiente código:
#block {
&.xxx {
width: 300px;
}
}
Explica cuál será el resultado de la compilación del siguiente código:
#block {
.xxx {
width: 300px;
}
}
Explica cuál será el resultado de la compilación del siguiente código:
#block {
&.xxx {
&.zzz {
width: 300px;
}
}
}
Explica cuál será el resultado de la compilación del siguiente código:
#block {
&.xxx {
.zzz {
width: 300px;
}
}
}
Explica cuál será el resultado de la compilación del siguiente código:
#block {
.xxx {
&.zzz {
width: 300px;
}
}
}
