LESS Dateien importieren

Datum
18.11.2017

Mit dem Import Befehl können die LESS Dateien auf mehrere aufgeteilt werden und nach und nach geladen werden. In diesem Beispiel werde ich die Farbwerte in die variables.less speichern und die Klassen in die style.less.

@import

style.less

@import "variables.less";
.redtext {
  color: @colorred;
  a{
    color: @colorred;
  }
}
.greentext {
  color: @colorgreen;
  a{
    color: @colorgreen;
  }
}

variables.less

@colorred: #dd0005;
@colorgreen: #00dd00;

generierte CSS

.redtext {
  color: #dd0005;
}
.redtext a {
  color: #dd0005;
}
.greentext {
  color: #00dd00;
}
.greentext a {
  color: #00dd00;
}

(inline) Parameter

Mit dem (inline) Parameter können CSS Dateien dazu geladen werden.

style.less

@import (inline) "global.css";
@colorred: #dd0005;

.redtext {
  color: @colorred;
}

global.css

* {
  margin: 0;
  padding: 0;
}

generierte CSS

* {
  margin: 0;
  padding: 0;
}

.redtext {
  color: #dd0005;
}

(multiple) Parameter

Mit dem (multiple) Parameter können less dateien mehrfach geladen werden, um zum Beispiel andere LESS Dateien zu überschreiben.

style.less

@import (multiple) "link.less";
@import (multiple) "link.less";

link.less

@colorred: #dd0005;

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

generierte CSS

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

(optional) Parameter

Bei nicht vorhanden LESS Dateien wird der Kompiliervorgang abgebrochen, aber bei dem Parameter (optional) wird die Datei ignoriert und der Prozess läuft weiter.

Zum nächsten Teil: LESS Variablen
Zur Tutorialübersicht: LESS Tutorial
Zum Vorigen Teil: LESS installieren und anwenden

Marc Borkowski
Autor: Marc Borkowski

Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Rostock. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bilde mich aktuell im grafischen Bereich weiter. Meine Zukunft sehe ich beim gestalterischen Web.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Twitter logoInstagram logoYouTube Logo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare anschauen
Kommentare (0)