@Import und Partials in Sass | Erklärt

SASS-Akronym für syntaktisch fantastische Stylesheet ist ein Vorprozessor und eine Erweiterung von CSS, die für seine sauberen und lesbaren Codedateien bekannt ist, die daher die Fähigkeit der grundlegenden CSS-Sprache verbessern. Mit Sass können Sie den CSS -Code trocken (nicht wiederholen), indem Sie die @Import -Regel verwenden. Was diese Regel in SASS zusammen mit Teilern in SASS ist und tut, sind die Themen, die in diesem Artikel diskutiert werden.

Was ist die @import -Regel in SASS?

Genau wie CSS unterstützt SASS auch die @Import -Richtlinie, die die Aufnahme eines Stylesheetes in einen anderen ermöglicht. Als Erweiterung der CSS @import -Regel erlaubt die Sass @import -Regel das Importieren .Sass und .SCSS -Dateien. Wenn Sie ein Stylesheet in ein anderes Stylesheet importieren.

Ein weiterer Vorteil, den diese SASS -Regel gegenüber der CSS -Regel hat, besteht darin, dass zur Laufzeit keine zusätzliche HTTP -Anfrage gestellt wird.

Syntax

@import filepath;

Die SASS @Import -Regel ermöglicht die Aufnahme beider Typen, sodass Sie SASS -Dateien in eine CSS -Datei aufnehmen können oder CSS -Dateien in einer SASS -Datei importieren können. Darüber hinaus können Sie so viele Dateien importieren, wie Sie in der Hauptdatei wünschen. Dateien, die importiert werden können, umfassen Reset Dateien, Farben, Variablen, Schriftarten usw.

Einige Beispiele für @import -Regel in SASS sind wie folgt.

@import "Schriftarten";
@import "Variablen";
@import "Farben";

Schauen wir uns ein Beispiel an, um diese Regel besser zu verstehen.

Beispiel

Angenommen, wir haben eine Datei mit der Namensdatei1.Sass und es sieht ungefähr so ​​aus.

Sass

H1
Schriftfamilie: Verdana, Sans-Serif;
Schriftgröße: 30px;
Farbe lila;

Wir haben auch eine andere Datei mit der Namensdatei2.Sass und hat den folgenden Code.

Sass

P
Schriftfamilie: Times New Roman, Serif;
Schriftgröße: 20px;
Farbe blau;

Jetzt möchten wir beide Dateien in eine andere Datei mit dem Namen des Namens importieren.Sass. Wir werden die @Import -Regel dafür verwenden.

@import Datei1, Datei2

Nach dem Zusammenstellen dieser Hauptdauer.SASS -Datei unsere resultierende CSS -Ausgabedatei wird so angezeigt.

Dateien wurden erfolgreich importiert!

Notiz: Die Verwendung der @Import -Regel wird entmutigt, da sie Konflikte verursacht, da sie auf alle Funktionen, Variablen, Mixins usw. auf die andere Datei zugreifen kann. Darüber hinaus verursacht dies auch Sicherheitsprobleme.

Partials in Sass

Teiler in SASS werden als die Dateien angesehen, deren Namen mit einem Unterstrich beginnen und diese nicht direkt transpilieren. Teilweise werden nur unter diesen Umständen getroffen, wenn Sie eine Datei importieren.

Syntax

_Dateinamen;

Zum Beispiel ist die unten gezeigte Datei ein „_font.scss ”Datei.

$ fontsize: 20px;
$ fontfamily: Times New Roman;
$ Farbe: Blau;

Der Startunterdrücker verhindert, dass diese Datei auf Schriftarten umgewandelt wird.CSS. Wenn Sie diese Datei jedoch importieren möchten.

Der Startunterdrücker verhindert, dass diese Datei auf Schriftarten umgewandelt wird.CSS. Wenn Sie diese Datei jedoch importieren möchten.
@import "Schriftarten"
H1
Schriftgröße: $ fontsize;
Textausrichtung; Center;
Farbe: $ Farbe;

Auf diese Weise wird die teilweise SASS -Datei importiert.

Abschluss

Die Sass @import -Anweisung ermöglicht die Aufnahme eines Stylesheetes in ein anderes und erhält Zugriff auf Variablen, Mixins und Funktionen der importierten Datei in die andere Datei. Darüber hinaus wird zur Laufzeit keine zusätzliche HTTP -Anfrage gestellt, wenn die @Import -Regel aufgerufen wird. In der Zwischenzeit werden Teil der SASS als jene Dateien angesehen, deren Namen mit einem Unterstrich beginnen und diese nicht direkt umgesetzt werden. Beide Einheiten werden in diesem Artikel ausführlich erörtert.