Vorige Folgende

LESS @import

Autor des Artikels : looplogic

Mit dem Import Befehl können die LESS Dateien auf mehrere aufgeteilt werden und in einer 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.

Vorige Folgende