Heim >Web-Frontend >CSS-Tutorial >Dateiaufteilung in SASS
Dateiaufteilung in SASS
- PHPznach vorne
- 2023-09-01 14:29:02897Durchsuche
SASS ist ein CSS-Präprozessor, der für „Syntactically Awesome Style Sheet“ steht. Der SASS-Code wird genau wie eine Skriptsprache wie JavaScript geschrieben, aber zum Zeitpunkt der Kompilierung wird er in CSS konvertiert und kompiliert Als CSS im Browser kann es mit jeder CSS-Version verwendet werden. Es wird verwendet, um die Art und Weise des Schreibens des Codes in normalem CSS zu verbessern In einem normalen Arbeitsbereich sind wir es gewohnt, den gesamten Code in eine separate Datei zu schreiben, was es für andere Entwickler schwierig macht, unseren Code zu lesen und zu verstehen. Mit SASS können wir Dateien aufteilen und Code in mehrere Dateien aufteilen.
Der Prozess des Aufteilens einer Datei umfasst das Aufteilen einer großen Datei in mehrere Unterdateien und deren anschließende Verknüpfung miteinander, was mit den folgenden Methoden in SASS einfach durchgeführt werden kann −Durch die Verwendung von @import und Partials
- Durch die Verwendung von @use und Partials
-
Lassen Sie uns nun die obige Methode anhand eines Codebeispiels zum Verknüpfen mehrerer Unterdateien einer einzelnen Datei in SASS im Detail verstehen.
Bei dieser Methode schreiben wir die Stile so, wie wir es normalerweise in CSS-Dateien schreiben, aber es wird eine gemeinsame Datei geben, die die
@import
-Anweisung für alle anderen Dateien enthält, um sie einzuschließen oder miteinander zu verknüpfen und den Code aller zu erhalten diese Dateien in dieser Datei.Nachdem alle Unterdateien verknüpft oder in die gemeinsame Datei eingebunden sind, müssen Sie den folgenden Befehl im selben Ordner ausführen, in dem alle SASS-Dateien vorhanden sind −
Sass –-watch common_file_name.scss final_output_file_name.scssDer obige Befehl verknüpft oder bindet den gesamten Code der gemeinsamen SASS-Datei in die endgültige Ausgabedatei ein, die mit dem HTML-Dokument verknüpft wird, um die Seite zu formatieren.
Lassen Sie uns anhand von Codebeispielen ausführlich besprechen, wie die obige Methode implementiert wird -
Schritte
- Schritt 1
- - In diesem Schritt erstellen wir mehrere SASS-Dateien mit der Erweiterung .scss
- – Jetzt erstellen wir eine SASS-Datei, die die @import-Anweisungen für alle im vorherigen Schritt erstellten SASS-Dateien enthält.
- – Im letzten Schritt verwenden wir den obigen Befehl, um die öffentliche Datei in die endgültige CSS-Datei einzubinden oder zu verknüpfen und sie dann mit dem HTML-Dokument zu verknüpfen.
Die chinesische Übersetzung von
Erklärung lautet:
- Datei 1
- − Lassen Sie uns eine Datei namens test.scss erstellen und etwas SASS-Code in diese Datei einfügen.
div{
color: #fff;
background: #444;
margin: 15px;
}
- Datei 2
- − Erstellen Sie nun eine Datei mit dem Namen
common.scss. Diese Datei verknüpft alle Unterdateien mithilfe der @import-Anweisung.
common.scss −
@import "test.scss";
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
- Datei 3
- − Dies wird unsere endgültige Datei sein, final.css, die den gesamten SASS-Code enthält und mit dem HTML-Dokument verknüpft wird.
sass –-watch common.scss final.cssfinal.css −
final.css:
/* imported code from test.scss */
div{
color: #fff;
background: #444;
margin: 15px;
}
/* code from common.scss */
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
Jetzt können wir die Datei final.css mit dem HTML-Dokument verknüpfen, um die Seite mit dem CSS aller SASS-Dateien zu formatieren, wie im folgenden Beispiel dargestellt.Beispiel
Das folgende Beispiel zeigt Ihnen, wie Sie mehrere SASS-Dateien erstellen und miteinander verknüpfen und eine Seite gestalten können −
<html>
<head>
<style>
/* imported code from test.scss */
div{
color: #fff;
background: #444;
margin: 15px;
}
/* code from common.scss */
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>This is Heading of First Div.</h2>
</div>
<div>
<h2>This is Heading of Second Div.</h2>
</div>
</body>
</html>
Im obigen Beispiel haben wir die endgültige final.css-Datei verwendet, um das Dokument mit allen Stilen von SASS-Dateien zu formatieren.
HINWEIS
– Bitte stellen Sie sicher, dass SASS auf Ihrem System vorinstalliert ist, um das obige Codebeispiel zu implementieren.Durch die Verwendung von @use und Teildateien
Das Einbetten von Stilen mit der Methode@use
ähnelt fast der Methode@import. Sie müssen den Dateinamen lediglich einen Unterstrich voranstellen und sie mit der @use-Anweisung importieren. Dadurch können wir auch auf Funktionen und Mixins zugreifen, die in der SASS-Datei definiert sind. Die chinesische Übersetzung von Erklärung lautet:
ErklärungDatei 1 – Datei 1 ist eine SASS-Datei, die die Funktionen, Mixins und einfachen CSS-Stile enthält, die mit einem Unterstrich als Präfix definiert sind.
- _test.scss −
@function my_space(){
$padding: "15px";
return $padding;
}
- Datei 2
- − Dies wird eine gemeinsame Datei sein, die alle SASS-Dateien mithilfe von @use-Anweisungen miteinander verknüpft.
@use "test";
div{
color: #fff;
padding: test.my_space();
}
- Datei 3
- − Diese Datei ist die endgültige CSS-Datei, sie ist die endgültige Version aller Stile aus allen SASS-Dateien.
sass –-watch common.scss final.cssfinal.css −
/* combined code from both files */
div{
color: #fff;
padding: 15px;
}
Auf diese Weise können Sie SASS implementieren, indem Sie die Dateien aufteilen und Stile zum HTML-Dokument mit einer endgültigen CSS-Ausgabedatei hinzufügen.
In diesem Artikel haben wir zwei Möglichkeiten kennengelernt, geteilte SASS-Dateien in einer separaten Datei zu verknüpfen oder einzubetten und diese endgültige CSS-Datei zu verwenden, um Stile zu unseren HTML-Seiten hinzuzufügen.
Das obige ist der detaillierte Inhalt vonDateiaufteilung in SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!