Dateiaufteilung in SASS-CSS-Tutorial-php.cn

Inhaltsverzeichnis

@import

@use

Heim

Web-Frontend

CSS-Tutorial

Dateiaufteilung in SASS

PHPz

Sep 01, 2023 pm 02:29 PM

SASS 中的文件分割

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.

Durch die Verwendung von @import und Teildateien

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.scss

Nach dem Login kopieren

Der 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

- 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

Erklärung

− 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;
}

Nach dem Login kopieren

− Erstellen Sie nun eine Datei mit dem Namen
common.scss. Diese Datei verknüpft alle Unterdateien mithilfe der @import-Anweisung.

@import "test.scss";
div{
   font-size: 22px;
   font-weight: bold;
   padding: 15px;
}

Nach dem Login kopieren

− 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.css

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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ärung

Datei 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;
}

Nach dem Login kopieren

− 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();
}

Nach dem Login kopieren

− 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.css

Nach dem Login kopieren

/* combined code from both files */
div{
   color: #fff;
   padding: 15px;
}

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonDateiaufteilung in SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7455

CakePHP-Tutorial

1375

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.

Show, Don ' Tell Mar 16, 2025 am 11:49 AM

Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach

Aufbau einer Ethereum -App mit Redwood.js und Fauna Mar 28, 2025 am 09:18 AM

Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt

Was zum Teufel haben NPM -Befehle? Mar 15, 2025 am 11:36 AM

NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.

Wie verwenden Sie CSS, um Texteffekte wie Textschatten und Gradienten zu erstellen? Mar 14, 2025 am 11:10 AM

In dem Artikel werden CSS für Texteffekte wie Schatten und Gradienten verwendet, diese für die Leistung optimiert und die Benutzererfahrung verbessert. Es listet auch Ressourcen für Anfänger auf (159 Zeichen)

Verwenden wir (x, x, x, x), um über Spezifität zu sprechen Mar 24, 2025 am 10:37 AM

Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und

Erstellen Sie Ihr eigenes Bragdoc mit ELEITY Mar 18, 2025 am 11:23 AM

Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.

See all articles