sass
Partials und Import
Suche…
Importieren
Mit @import können Sie Ihre Dateien in mehrere kleinere Dateien aufteilen. Dies ist sinnvoll, da Sie Ihre Stylesheets besser strukturieren und sehr große Dateien vermeiden können.
Beispiel
Nehmen wir an, Sie haben ein paar Dateien.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Ihr Haupt-Stylesheet application.scss kann alle Dateien importieren sowie eigene Stile definieren.
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
Beachten Sie, dass Sie die Erweiterung .scss auch weglassen können, um @import 'header'; schreiben @import 'header'; anstelle von @import 'header.scss' .
Dies führt dazu application.scss dass in application.scss alle importierten .scss in der kompilierten Datei enthalten sind, die Sie dem Client (Browser) .scss . In diesem Fall wäre Ihre kompilierte Datei application.css die Sie in Ihre HTML-Datei aufnehmen.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Obwohl Sie mit mehreren Dateien arbeiten, stellen Sie nur eine Datei bereit, so dass mehrere Anforderungen (eine für jede Datei) entfallen und die Ladezeit für Ihre Besucher verkürzt wird.
Hauptvorteile
- Bessere Struktur für die Entwicklung mit Ordnern und mehreren Dateien
- Nur eine Datei an den Client (Browser) liefern
Teilstücke
Sie können Teildateien erstellen, die kleinere Ausschnitte Ihrer Stylesheets enthalten. Dadurch können Sie Ihr CSS modularisieren und Ihre Stylesheets besser strukturieren. Ein Partial ist eine Sass-Datei mit dem führenden Unterstrich, dh _partial.scss . Der Unterstrich lässt Sass wissen, dass die bestimmte Datei eine unvollständige Datei ist und nicht in eine CSS-Datei generiert wird.
Sass-Partials sollen mit der @import Direktive verwendet werden. Bei Verwendung von @import können Sie den führenden Unterstrich weglassen.
Beispiel
Angenommen, Sie haben eine Dateistruktur mit solchen Partials
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
Sie können diese Partials wie folgt in Ihre main.scss Datei main.scss (führende Unterstriche und Dateierweiterungen werden in diesem Beispiel nicht angegeben):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';