LESS Dateien importieren

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