LESS Variablen

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
• Variablennamen doppelt verwenden
• Wirkungsbereich
• Klassennamen in Varibalen speichern
• Variablen linken
• Variablen in Funktionen

Variable

Variable definieren:

@colorred: #dd0005;

Variable verwenden:

.redtext {
  a {
    color: @colorred;
  }
}

generierte folgendes CSS:

.redtext a {
  color: #dd0005;
}

Variablennamen doppelt verwenden

Es wird immer der zuletzt zugewiesene Werte in einer Verschachtelung verwendet.

@colorred: #dd0004;
.redtext {
  @colorred: #dd0005;
  a {
    @colorred: #dd0006;
    color: @colorred;
    @colorred: #dd0007;
    @colorred: #dd0008;
  }
  color: @colorred;
}
.redtext_pre{
  color: @colorred;
}

generierte folgendes CSS:

.redtext {
  color: #dd0005;
}
.redtext a {
  color: #dd0008;
}
.redtext_pre {
  color: #dd0004;
}

Wirkungsbereich

Wenn Variablen in einer Klasse definiert werden, sind diese auch nur dort gültig.

.redtext {
  @colorred: #dd0005;
  color: @colorred;
}
.redtext_pre{
  color: @colorred;
}

Gibt folgenden Fehler in der Konsole aus:

NameError: variable @colorred is undefined

Es ist aber egal ob die Variable vor oder nach der Klasse definiert wird, da die Variablen erst compiliert werden und dann eingesetzt.

.redtext {
  color: @colorred;
}
@colorred: #dd0005;

generierte folgendes CSS:

.redtext {
  color: #dd0005;
}

Klassennamen in Varibalen speichern

Es ist möglich Klassennamen in Variablen zu speichern und zu verwenden.

@colorred: #dd0005;
@redtext-selector: redtext;

.@{redtext-selector} {
  color: @colorred;
}
.@{redtext-selector}_pre {
  color: @colorred;
}

generierte folgendes CSS:

.redtext {
  color: #dd0005;
}
.redtext_pre {
  color: #dd0005;
}

Variablen linken

Variablen können verknüpft werden, dann erhalten beide Variablen dauerhaft den gleichen Wert.

.redtext {
  color: @colorred2;
}
@colorred: #dd0005;
@colorred2: @colorred;
@colorred: #dd0006;

generierte folgendes CSS:

.redtext {
  color: #dd0006;
}

.redtext {
  color: @colorred2;
  @colorred: #dd0006;
}
@colorred: #dd0005;
@colorred2: @colorred;

generierte folgendes CSS:

.redtext {
  color: #dd0006;
}

Variablen in Funktionen

Wenn Variablen in Funktionen verwendet werden, wird wieder der zuletzt gespeicherte Wert verwendet.

@colorred: red;
@colorred_dark: darken(@colorred, 10%);
.redtext {
  color: @colorred_dark;
}
@colorred: green;

generierte folgendes CSS:

.redtext {
  color: #004d00;
}

Zum nächsten Teil: LESS Mixins
Zur Tutorialübersicht: LESS Tutorial
Zum Vorigen Teil: LESS Dateien importieren