Parameter mit Kommas in LESS
Nehmen wir an, wir haben eine Funktion, die einen Schatten für einen Block erzeugt:
.shadow(@s) {
box-shadow: @s;
}
Wie Sie sehen, hat unsere Funktion einen Parameter. Das bedeutet, dass wir alle Werte unseres Schattens durch Leerzeichen getrennt an diesen Parameter übergeben, etwa so:
div {
.shadow(1px 1px red);
}
In CSS kann man jedoch mehrere Schatten festlegen, indem man sie durch Kommas trennt. In unserem Fall wird das leider nicht funktionieren, da das Komma vom Compiler als Trennzeichen zwischen den Funktionsparametern interpretiert wird:
div {
.shadow(1px 1px red, 1px 1px blue); // gibt einen Fehler aus
}
Es gibt jedoch einen Ausweg. Wir können LESS dazu zwingen, unsere Zeichenkette mit einem Komma als einen einzelnen Parameter zu interpretieren. Dazu müssen wir die Aufzählung unserer Werte mit einem Semikolon abschließen:
div {
.shadow(1px 1px red, 1px 1px blue;);
}
Erstellen Sie eine Funktion, die einen Hintergrund hinzufügt. Verwenden Sie diese Funktion, um einem Block mehrere Hintergründe hinzuzufügen.