SCSS - Import
1. Altbekannt
Der Import anderer SCSS-Dateien erfolgt genau so wie in CSS, nämlich über import
. Es gibt allerdings zwei Besonderheiten.
- Man benötigt beim Import keine Dateiendung. Natürlich vorausgesetzt, dass die einzubindende Datei mit
.scss
endet. - Die einzubindende Datei kann mit einem Unterstrich (dazu später mehr) beginnen oder nicht.
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 {
width: getPrecent(11, 6);
}
/* enthält Funktion getPercent */
@import 'functions';
/* Ergebnis in der CSS-Datei */
.bla {
width: getPrecent(11, 6);
}
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:
styles.scss
(enthält alle Importe)color.scss
(alle Farbdefinitionen aber nur, wenn es richtig bunt wird)functions.scss
(alle Funktionen und Mixins)media.scss
(alle Mediaqueries)- Der Rest wird dann je nach Layout und dessen Komplexität in eine oder mehrere Dateien aufgeteilt.
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