Wozu dient die SASS-@import-Funktion?

SASS ist ein CSS-Präprozessor, der den CSS-Code trocken hält, indem er keine Duplizierung im Code zulässt. In SASS stehen verschiedene Direktiven zur Verfügung, eine davon ist die @import-Direktive.

Die „@import“-Direktive wird verwendet, um den Code einer „.scss“- oder „.sass“-Datei in eine andere Datei zu importieren und ihn während der Kompilierung auszuführen. Wir können die „@import“-Direktive verwenden, um Variablen, Funktionen, Mixins usw. von einer Datei in eine andere zu importieren.

Grammatik

Benutzer können die Direktive „@import“ in SASS verwenden, um Dateien gemäß der folgenden Syntax zu importieren.

@import 'test'

Wir haben die Datei „test.scss“ oder „test.sass“ in der oben genannten Syntax importiert. Hier müssen wir beim Importieren des Codes nicht die Dateierweiterung angeben, der Compiler erkennt sie automatisch.

Wenn der Benutzer mehrere CSS-Dateien in eine einzige Datei importieren möchte, sollte die folgende Syntax verwendet werden.

@import 'file1', 'file2', 'file3', 'file4', ...

Lassen Sie uns nun anhand eines Beispiels verstehen, wie eine Datei mithilfe der @import-Direktive importiert wird.

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Im folgenden Beispiel haben wir einige Variablen in der Datei „font.scss“ hinzugefügt. Anschließend importieren wir mit der Direktive „@import“ den Inhalt der Datei „fonts.scss“ in die Datei „styles.scss“.

In der Datei „style.scss“ verwenden wir die Variablen der Datei „font.scss“. Danach haben wir den Code der Datei „styles.scss“ kompiliert und der Benutzer kann den aktualisierten Code der Datei „style.css“ im Ausgabebild sehen.

Dateiname – Style.scss

@import "fonts";
$height: 5rem;
$border: 2px, solid, blue;
div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}
h1 {
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   color: $heading-font-color;
   font-family: $heading-font-family;
}
p {
   font-size: $paragraph-font-size;
   font-weight: 200;
}

Dateiname – Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-color: #000;
$heading-font-family: "Roboto", sans-serif;

Ausgabe

Die chinesische Übersetzung von

Beispiel 2

lautet:

Beispiel 2

Im folgenden Beispiel fügen wir farbbezogene Variablen zur Datei „color.scss“ und schriftbezogene Variablen zur Datei „fonts.scss“ hinzu. In der Datei „style.scss“ verwenden wir die Direktive „@import“, um die Dateien „fonts.scss“ und „colors.scss“ gemeinsam zu importieren.

In der Datei „style.scss“ verwenden wir Farb- und Schriftartvariablen. In der Ausgabe kann der Benutzer die Werte bestimmter CSS-Eigenschaften beobachten, bei denen wir Variablen verwenden.

Dateiname – Style.scss

@import "fonts", "colors";
div {
   color: $text-color;
   background-color: $background-color;
}
ul {
   li {
      color: $text-color;
      background-color: $background-color;
      font-size: $normal-font-size;
   }
}
h1 {
   color: $primary-color;
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   font-family: $heading-font-family;
}

Dateiname – Colors.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

Dateiname – Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-family: "Roboto", sans-serif;

Ausgabe

Vorteile der Verwendung der @import-Direktive

Die Verwendung der „@import“-Direktive bietet einige Vorteile, die wir unten erläutern.

• Wir können den CSS-Code einer Datei in eine andere Datei importieren.

• Wir können für jede Komponente des Codes eine separate CSS-Datei erstellen und diese bei Bedarf importieren.

Nachteile der Verwendung der @import-Direktive

Die Verwendung der „@import“-Direktive hat einige Nachteile, die wir im Folgenden erläutern.

• Es macht alles in der CSS-Datei, wie Variablen, Funktionen, Mixins usw., global zugänglich. Daher ist es für Entwickler schwierig zu bestimmen, wo eine bestimmte Variable definiert ist.

• Da alles in jeder importierten Datei global wird, sollte jede Datei unterschiedliche Variablennamen haben, um Konflikte zu vermeiden.

• Der SASS-Compiler kompiliert jede SCSS-Datei, egal ob importiert oder nicht, was die Kompilierungszeit erhöht und die Codeeffizienz verringert.

Teildateien in SASS verwenden

Um die oben genannten Mängel zu beheben, können wir Partials in SASS verwenden. Wir können eine teilweise SCSS-Datei erstellen, indem wir dem Dateinamen einen Unterstrich voranstellen. Zum Beispiel „_test.scss“, „_colors.scss“ usw.

Wenn wir Teildateien verwenden, kompiliert der SASS-Übersetzer den Code der Teildatei nicht, was die Effizienz des Codes verbessern kann. Wir können jedoch den Inhalt der Teil-SCSS-Datei in die Haupt-SCSS-Datei importieren.

Dies ist ein Beispiel für die Verwendung teilweiser SCSS-Dateien.

Beispiel 3

Im folgenden Beispiel haben wir die Teildatei „_colors.scss“ erstellt und in die Datei „style.scss“ importiert. In diesem Beispiel lässt sich der Code effizienter kompilieren, da wir Teildateien verwenden.

Die Codeausgabe bleibt jedoch gleich, unabhängig davon, ob wir Teile des Codes verwenden oder nicht.

Dateiname – Style.scss

@import "colors";
img {
   width: 100%;
   height: 100%;
   background-color: $background-color;
}
p {
   color: $text-color;
}

Dateiname – _Color.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

Ausgabe

Benutzer haben gelernt, die Direktive „@import“ zu verwenden, um den Code einer Datei in eine andere Datei zu importieren. Es hilft uns, SCSS-Code in kleinere Teile zu unterteilen und Duplikate zu vermeiden. Allerdings hat die Verwendung der @import-Direktive einige Nachteile, aber wir können Partials verwenden, um dieses Problem zu lösen.

Das obige ist der detaillierte Inhalt vonWozu dient die SASS-@import-Funktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!