Variables dentro de selectores en LESS
Las variables también se pueden usar dentro de los selectores.
Sin embargo, para ello es necesario utilizar
una sintaxis de interpolación ligeramente diferente:
después de @ el nombre de la variable debe estar
entre llaves. Veamos algunos ejemplos.
Supongamos que tenemos la siguiente variable:
@var: div;
Interpolemos esta variable en un selector. Consideremos varias situaciones.
Ejemplo
Usemos nuestra variable como selector:
@{var} {
font-size: 20px;
}
Resultado de la compilación:
div {
font-size: 20px;
}
Ejemplo
Ahora supongamos que nuestra variable contiene parte del selector:
main @{var} {
font-size: 20px;
}
Resultado de la compilación:
main div {
font-size: 20px;
}
Ejemplo
Ahora supongamos que decimos que nuestra variable
contiene no el nombre de la etiqueta, sino su id.
Añadamos una almohadilla delante del nombre de la variable:
#@{var} {
font-size: 20px;
}
Resultado de la compilación:
#div {
font-size: 20px;
}
Ejemplo
Ahora supongamos que decimos que nuestra variable contiene no el nombre de la etiqueta, sino su clase. Añadamos un punto delante del nombre de la variable:
.@{var} {
font-size: 20px;
}
Resultado de la compilación:
.div {
font-size: 20px;
}
Tareas prácticas
Explica cuál será el resultado de la compilación del siguiente código:
@var: ul;
@{var} {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: ul;
div @{var} {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: ul;
div @{var} {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: ul;
@{var} li {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: list;
.@{var} {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: list;
#@{var} li {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: list;
.@{var} li {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: .block;
ul@{var} {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var: a;
@{var}:hover {
text-decoration: none;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Explica cuál será el resultado de la compilación del siguiente código:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
