In LESS können Variablen erstellt werden, in diese man z.B. URL's, Farbwerte oder Abstände speichern kann um eine höhere Wartbarkeit zu schaffen. Eine Variable fängt mit einem @ an, danach folgt der Name und ein Doppelpunkt, der Inhalt der Variable und ein Semikolon. Bei doppelten Namen wird der zuletzt verwendete Inhalt benutzt.
Variable
Variable definieren:
Variable verwenden:
generierte folgendes CSS:
Variablennamen doppelt verwenden
Es wird immer der zuletzt zugewiesene Werte in einer Verschachtelung verwendet.
generierte folgendes CSS:
Wirkungsbereich
Wenn Variablen in einer Klasse definiert werden, sind diese auch nur dort gültig.
Gibt folgenden Fehler in der Konsole aus:
NameError: variable @colorred is undefinedEs ist aber egal ob die Variable vor oder nach der Klasse definiert wird, da die Variablen erst compiliert werden und dann eingesetzt.
generierte folgendes CSS:
Klassennamen in Varibalen speichern
Es ist möglich Klassennamen in Variablen zu speichern und zu verwenden.
generierte folgendes CSS:
Variablen können verknüpft werden, dann erhalten beide Variablen dauerhaft den gleichen Wert.
generierte folgendes CSS:
generierte folgendes CSS:
Variablen in Funktionen
Wenn Variablen in Funktionen verwendet werden, wird wieder der zuletzt gespeicherte Wert verwendet.
generierte folgendes CSS: