SASS Schnellstart / SASS Schnellstart Modul 3 – SASS für Fortgeschrittene
0%
In Bearbeitung

SASS Schnellstart – Partials

Eine der besten Anwendungen der Sass @import Direktive ist es, separate Dateien zu erstellen, die alle Standarddefinitionen für deine Seite enthalten - Farben, Schriftgrößen und -familien und so weiter - und sie dann dort einzubinden, wo du sie brauchst. Dies ist natürlich ein klassisches Beispiel für DRY-Programmierung.

Da der einzige Zweck dieser Dateien ist, in andere Sass-Dateien eingebunden zu werden, gibt es keinen Grund, sie direkt zu transpilieren. Tatsächlich werden viele von ihnen gar kein CSS erzeugen. Ein Beispiel dafür ist eine Datei, die nur Variablendefinitionen enthält: Sie würde zu einer leeren CSS-Datei führen.

SCSS:
$rot: #ff0000; 
$grün: #00ff00; 
$blau: #0000ff;
Wenn der Sass-Transpiler ein Verzeichnis überwacht (entweder über das Kommandofenster oder über eine Editor-Erweiterung), möchtest du Änderungen an diesen Dateien von der Transpilierung ausschließen, und Sass macht es dir leicht, dies zu tun. Setze einfach einen Unterstrich vor den Namen der Dateien. Anstatt colors.scss, zum Beispiel, nenne die Datei _colors.scss. Eine Datei, die Der Transpiler wird sie ignorieren, aber du kannst sie trotzdem in andere Sass-Dateien einbinden.

Dateien wie diese sind als "Partials" bekannt, und du kannst sie auf normale Weise in eine andere .scss Datei einbinden. Per Konvention wird der führende Unterstrich weggelassen, aber du kannst ihn einfügen, wenn du möchtest. Wie wir sehen werden:

Sass:
@import "colors"; // nach Konvention, den Unterstrich weglassen 
@import "_colors"; // das funktioniert aber auch
Wenn du dein CSS auf diese Art und Weise strukturierst, hat das keine Performance-Einbußen - du erhältst am Ende des Transpilierungsprozesses ein sauberes, eigenständiges CSS und es macht deinen Code weniger repetitiv und einfacher zu pflegen. Wenn du dir CSS-Frameworks wie Bootstrap 4 oder MaterializeCSS ansiehst, wirst du oft eine einzige SCSS-Datei finden, die nichts als @import-Anweisungen enthält. Alle anderen Dateien sind Partials.