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

SASS Schnellstart – Imports

Bis jetzt haben wir die Möglichkeiten erforscht, wie Sass es ermöglicht, CSS effizienter zu schreiben. In diesem und dem nächsten Kapitel schauen wir uns an, wie du mit Sass deinen CSS-Code DRY (Don't Repeat Yourself) halten kannst.

@import

Alles, was du in CSS tun kannst, kannst du auch in Sass tun, und das schließt die Verwendung der @import-Direktive ein. Aber wie du wahrscheinlich schon erwartet hast, erweitert Sass @import auf einige nützliche Arten. Zunächst einmal unterstützt es die Einbindung von .sass und .scss Dateien. Die grundlegende Syntax ist die gleiche:

Syntax:
@import <Dateiname>
Zum Beispiel wird @import "colors" colors.scss oder colors.sass in die CSS-Ausgabe einbeziehen, wenn sie im aktuellen Verzeichnis existiert.
Beachte, dass dies etwas anders ist als die CSS @import Direktive: Die Datei wird in das CSS eingebunden; es wird kein extra http-Aufruf zur Laufzeit benötigt. Dies vermeidet eines der großen Performance-Probleme mit dem Standard CSS @import.

Du kannst das Standardverhalten auf verschiedene Arten außer Kraft setzen. Jede der folgenden, zum Beispiel, führt dazu, dass eine Standard CSS @import Direktive im CSS ausgegeben wird:

Beispiel: @import
@import "colors.css"; //die .css Erweiterung wird angegeben
@import https://lerneprogrammieren.de/colors.css; //der Präfix http:// wird verwendet 
@import "colors" screen; //die Import-Anweisung enthält eine Media Query 
@import url(colors); //die url() Funktion wird verwendet
Das resultierende CSS würde die folgenden Anweisungen enthalten:
CSS:
@import "colors.css"
@import https://lerneprogrammieren.de/colors.css; 
@import "colors" screen: 
@import url(colors)
Normalerweise verwendest du die @import-Direktive am Anfang einer Datei, wo ihr Inhalt globalen Geltungsbereich hat. Aber mit ein paar Ausnahmen kannst du @import Anweisungen auch verschachteln. Du kannst keine verschachtelten Importe innerhalb von Mixins (später in der nächsten Lektion besprochen) oder innerhalb von Kontrollanweisungen verwenden, aber ansonsten kannst du @import überall dort verwenden, wo du es brauchst.