Hauptmenü

Untermenü

SCSS - Import

1. Altbekannt

Der Import anderer SCSS-Dateien erfolgt genau so wie in CSS, nämlich über import. Es gibt allerdings zwei Besonderheiten.

Einbindung


@import 'scss/colors';

Hier wird aus dem Ordner scss die Datei colors.scss eingebunden. Die könnte auch _colors.scss heißen.

2. Besonderheiten

Wenn man Funktionen, Mixins oder Farben in externe Dateien auslagert, so muss der Import vor dem Aufruf erfolgen. Bei den Mixins und den Farben erkennt man das sehr schnell, denn der Präprozessor wirft dann einen Fehler aus. Bei den Funktionen dagegen ist es so, dass der Aufruf einfach ignoriert wird.


.bla {
  widthgetPrecent(116);
}
/* enthält Funktion getPercent */
@import 'functions';

/* Ergebnis in der CSS-Datei */
.bla {
  widthgetPrecent(116);
}

Also erst alle externen Dateien importieren und dann loslegen.

3. Struktur

Wie man nun sein Projekt strukturiert, ist "latürnich" jedem selbst überlassen. Außerdem hängt das immer von der Komplexität des Designs ab. Ich persönlich baue das eigentlich immer so auf:

4. Partials

So weit ich das verstanden habe, sollen die gesondert behandelt werden. Wenn also eine Datei mit einem Unterstrich beginnt, so soll sie als "Partial" behandelt werden. Das soll (!) bedeuten, dass sie zwar importiert wird, aber die Anweisungen nicht in der CSS-Datei landen.

Tut es aber nicht!

Möglicherweise liegt es an Koala. Andere Präprozessoren sollen ein ähnliches Problem haben. Da ich aber noch nie diese spezielle Funktionalität benötigt habe, kümmert mich das erst mal nicht. Ich wollte es nur erwähnen.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt