Komma gescheiden samenvoegen in LESS
Stel we hebben een functie die een schaduw voor een blok maakt:
.shadow(@s) {
box-shadow: @s;
}
Stel we willen twee schaduwen aan een blok toevoegen door onze functie twee keer aan te roepen:
p {
.shadow(1px 1px red);
.shadow(2px 2px blue);
}
Het zal ons echter niet lukken, omdat
het aanroepen van twee schaduwen simpelweg twee
box-shadow eigenschappen zal toevoegen:
p {
box-shadow: 1px 1px red;
box-shadow: 2px 2px blue;
}
Terwijl we zouden willen dat de schaduwen
in één box-shadow eigenschap worden toegevoegd,
gescheiden door een komma, zoals dit:
p {
box-shadow: 1px 1px red, 2px 2px blue;
}
Om onze functie op de beschreven manier te laten
werken, moet de eigenschapswaarde na een
speciale operator +: worden geschreven, zoals dit:
.shadow(@s) {
box-shadow+: @s;
}
Maak een vergelijkbare functie voor de eigenschap
text-shadow.
Maak een vergelijkbare functie voor de eigenschap
background.
