LESS Variablen

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

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;
}
#004d00
Werbung