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 :
@var: div;
Insérons cette variable dans un sélecteur. Examinons différentes situations.
Exemple
Utilisons notre variable comme sélecteur :
@{var} {
font-size: 20px;
}
Résultat de la compilation :
div {
font-size: 20px;
}
Exemple
Supposons maintenant que notre variable contienne une partie du sélecteur :
main @{var} {
font-size: 20px;
}
Résultat de la compilation :
main 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 :
#@{var} {
font-size: 20px;
}
Résultat de la compilation :
#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 :
.@{var} {
font-size: 20px;
}
Résultat de la compilation :
.div {
font-size: 20px;
}
Tâches pratiques
Expliquez quel sera le résultat de la compilation du code suivant :
@var: ul;
@{var} {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: ul;
div @{var} {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: ul;
div @{var} {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: ul;
@{var} li {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: list;
.@{var} {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: list;
#@{var} li {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: list;
.@{var} li {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: list;
ul.@{var} li {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: list;
ul.@{var} li {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: .block;
ul@{var} {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: .block;
ul@{var} li {
font-size: 20px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var: a;
@{var}:hover {
text-decoration: none;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Expliquez quel sera le résultat de la compilation du code suivant :
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
