К содержанию

Variables dans les sélecteurs LESS

Les variables peuvent également être utilisées dans les sélecteurs. Cependant, pour cela, il est nécessaire d'utiliser une syntaxe d'insertion de variable légèrement différente : après @, le nom de la variable doit être placé entre accolades. Regardons des exemples. Supposons que nous ayons la variable suivante :

styles.less@var: div;

Insérons cette variable dans un sélecteur. Examinons différentes situations.

Exemple

Utilisons notre variable comme sélecteur :

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

Résultat de la compilation :

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

Exemple

Supposons maintenant que notre variable contienne une partie du sélecteur :

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

Résultat de la compilation :

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

Exemple

Supposons maintenant que nous disions que notre variable contient non pas un nom de balise, mais son id. Ajoutons un dièse devant le nom de la variable :

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

Résultat de la compilation :

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

Exemple

Supposons maintenant que nous disions que notre variable contient non pas un nom de balise, mais sa classe. Ajoutons un point devant le nom de la variable :

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

Résultat de la compilation :

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

Tâches pratiques

Задание 1

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: ul;

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

Задание 2

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: ul;

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

Задание 3

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: ul;

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

Задание 4

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: ul;

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

Задание 5

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: list;

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

Задание 6

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: list;

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

Задание 7

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: list;

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

Задание 8

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: list;

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

Задание 9

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: list;

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

Задание 10

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: .block;

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

Задание 11

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: .block;

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

Задание 12

Expliquez quel sera le résultat de la compilation du code suivant :

styles.less@var: a;

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

Задание 13

Expliquez quel sera le résultat de la compilation du code suivant :

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

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

Задание 14

Expliquez quel sera le résultat de la compilation du code suivant :

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

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