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
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
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.scss
Lassen Sie uns anhand von Codebeispielen ausführlich besprechen, wie die obige Methode implementiert wird -
Schritte
Die chinesische Übersetzung von
Erklärung
div{
color: #fff;
background: #444;
margin: 15px;
}
common.scss. Diese Datei verknüpft alle Unterdateien mithilfe der @import-Anweisung.
@import "test.scss";
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
sass –-watch common.scss final.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;
}
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>
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@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ärung
@function my_space(){
$padding: "15px";
return $padding;
}
@use "test";
div{
color: #fff;
padding: test.my_space();
}
sass –-watch common.scss final.css
/* combined code from both files */
div{
color: #fff;
padding: 15px;
}
Das obige ist der detaillierte Inhalt vonDateiaufteilung in SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
