К содержанию

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:

styles.less@var: div;

Interpolemos esta variable en un selector. Consideremos varias situaciones.

Ejemplo

Usemos nuestra variable como selector:

styles.less@{var} {
  font-size: 20px;
}

Resultado de la compilación:

styles.cssdiv {
  font-size: 20px;
}

Ejemplo

Ahora supongamos que nuestra variable contiene parte del selector:

styles.lessmain @{var} {
  font-size: 20px;
}

Resultado de la compilación:

styles.cssmain 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:

styles.less#@{var} {
  font-size: 20px;
}

Resultado de la compilación:

styles.css#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:

styles.less.@{var} {
  font-size: 20px;
}

Resultado de la compilación:

styles.css.div {
  font-size: 20px;
}

Tareas prácticas

Задание 1

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

Explica cuál será el resultado de la compilación del siguiente código:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}