Concaténation par virgule dans LESS
Supposons que nous ayons une fonction qui crée une ombre pour un bloc :
.shadow(@s) {
box-shadow: @s;
}
Supposons que nous voulions ajouter deux ombres à un bloc, en appelant notre fonction deux fois :
p {
.shadow(1px 1px red);
.shadow(2px 2px blue);
}
Cependant, nous n'y arriverons pas, car
l'appel de deux ombres ajoutera simplement deux propriétés
box-shadow :
p {
box-shadow: 1px 1px red;
box-shadow: 2px 2px blue;
}
Alors que nous souhaiterions que les ombres soient ajoutées
dans une seule propriété box-shadow, séparées par une virgule,
comme ceci :
p {
box-shadow: 1px 1px red, 2px 2px blue;
}
Pour que notre fonction fonctionne de la manière décrite,
il faut écrire la valeur de la propriété après
l'opérateur spécial +:, comme ceci :
.shadow(@s) {
box-shadow+: @s;
}
Créez une fonction similaire pour la propriété
text-shadow.
Créez une fonction similaire pour la propriété
background.
