Komma-separerade parametrar i LESS
Anta att vi har en funktion som skapar en skugga för ett block:
.shadow(@s) {
box-shadow: @s;
}
Som du ser har vår funktion en parameter. Det betyder att vi skickar alla värden för vår skugga till denna parameter mellan mellanslag, så här:
div {
.shadow(1px 1px red);
}
I CSS kan man dock ange flera skuggor genom att skriva dem separerade med kommatecken. I vårt fall kommer detta tyvärr inte att fungera, eftersom kommatecknet kommer att tolkas av kompilatorn som en avskiljare mellan funktionsparametrar:
div {
.shadow(1px 1px red, 1px 1px blue); // kommer att ge ett fel
}
Det finns dock en lösning. Vi kan tvinga LESS att tolka vår sträng med kommatecken som en parameter. För att göra detta måste vi avsluta listan av våra värden med ett semikolon:
div {
.shadow(1px 1px red, 1px 1px blue;);
}
Skapa en funktion som lägger till en bakgrund. Använd denna funktion för att lägga till flera bakgrunder till ett block.