Ich modularisiere meine Stylesheets mit SASS-Partials wie folgt:
@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues
Gibt es eine Möglichkeit, das gesamte Teilverzeichnis (es ist ein Verzeichnis voller SASS-Teilverzeichnisse) wie @import kompass oder so etwas einzuschließen?
@import 'partials/header', 'partials/viewport', 'partials/footer';
.Antworten:
Wenn Sie Sass in einem Rails-Projekt verwenden, bietet das Sass-Rails-Juwel https://github.com/rails/sass-rails Glob-Import.
Um das Problem in einer anderen Antwort zu beantworten: "Wenn Sie ein Verzeichnis importieren, wie können Sie die Importreihenfolge bestimmen? Es gibt keine Möglichkeit, die keine neue Komplexität einführt."
Einige würden argumentieren, dass das Organisieren Ihrer Dateien in Verzeichnissen die Komplexität reduzieren kann.
Das Projekt meiner Organisation ist eine ziemlich komplexe App. Es gibt 119 Sass-Dateien in 17 Verzeichnissen. Diese entsprechen in etwa unseren Ansichten und werden hauptsächlich für Anpassungen verwendet, wobei das schwere Heben von unserem benutzerdefinierten Rahmen übernommen wird. Für mich sind einige Zeilen importierter Verzeichnisse etwas weniger komplex als 119 Zeilen importierter Dateinamen.
Um die Ladereihenfolge zu regeln, platzieren wir Dateien, die zuerst geladen werden müssen - Mixins, Variablen usw. - in einem früh geladenen Verzeichnis. Ansonsten ist und sollte die Ladereihenfolge irrelevant sein ... wenn wir die Dinge richtig machen.
quelle
@import "*"
(in application.css.scss) hinzu, wenn sich die css / scss-Dateien Ihres Controllers zusammen mit application.css.scss im Ordner "app / assets / stylesheets" befinden.@import "*"
in application.scss alle anderen Dateien enthält, die im selben Verzeichnis vorhanden sind, application.scss jedoch nicht erneut enthält. Ich habe erwartet, dass ein Endlosschleifenfehler auftritt.Diese Funktion wird niemals Teil von Sass sein. Ein Hauptgrund ist die Importreihenfolge. In CSS können die zuletzt importierten Dateien die zuvor angegebenen Stile überschreiben. Wie können Sie die Importreihenfolge bestimmen, wenn Sie ein Verzeichnis importieren? Es gibt keine Möglichkeit, die keine neue Komplexität einführt. Wenn Sie eine Liste der Importe führen (wie in Ihrem Beispiel), wird die Importreihenfolge explizit angegeben. Dies ist wichtig, wenn Sie Stile, die in einer anderen Datei definiert sind, sicher überschreiben oder Mixins in eine Datei schreiben und in einer anderen verwenden möchten.
Weitere Informationen zu dieser geschlossenen Funktionsanforderung finden Sie hier:
quelle
@import "/functions"
oder@import "partials/"
.Schauen Sie sich das Sass-Globbing-Projekt an .
quelle
Ich erstelle eine Datei mit dem Namen
__partials__.scss
im selben Verzeichnis vonpartials
In
__partials__.scss
schrieb ich diese:Wenn ich also das Ganze importieren möchte
partials
, schreibe einfach@import "partials"
. Wenn ich eines davon importieren möchte, kann ich auch schreiben@import "partials/header"
.quelle
@import 'partials/xyz'
Anweisungen jedes Mal manuell hinzuzufügen, wenn ein neuer Teil erstellt wird.forms
undwidgets
mich@import "forms"; @import "widgets"
nur um alle einzelnen Partials (@import forms/text; @import forms/button
...) informs.scss
und kümmernwidgets.scss
.Sie können eine Problemumgehung verwenden, indem Sie eine Sass-Datei in den Ordner legen, den Sie importieren möchten, und alle Dateien in dieser Datei wie folgt importieren:
Dateipfad: main / current / _current.scss
@import "placeholders"; @import "colors";
und in der nächsten Dir-Level-Datei verwenden Sie einfach Import für Datei, was alle Dateien aus diesem Verzeichnis importiert hat:
Dateipfad: main / main.scss
@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";
Auf diese Weise haben Sie die gleiche Anzahl von Dateien, wie Sie das gesamte Verzeichnis importieren. Vorsicht vor der Reihenfolge, die zuletzt kommende Datei überschreibt die übereinstimmenden Stile.
quelle
Möglicherweise möchten Sie die Quellreihenfolge beibehalten, dann können Sie diese einfach verwenden.
Ich bevorzuge das.
quelle
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
sieht nicht so aus.
Wenn für eine dieser Dateien immer die anderen erforderlich sind, lassen Sie sie die anderen Dateien importieren und nur die Dateien der obersten Ebene importieren. Wenn sie alle eigenständig sind, müssen Sie es so weitermachen, wie Sie es jetzt sind.
quelle
In der akzeptierten Antwort von Dennis Best heißt es: "Andernfalls ist und sollte die Ladereihenfolge irrelevant sein ... wenn wir die Dinge richtig machen." Das ist einfach falsch. Wenn Sie die Dinge richtig machen, verwenden Sie die CSS-Reihenfolge, um die Spezifität zu reduzieren und Ihre CSS einfach und sauber zu halten.
_all.scss
Um Importe zu organisieren, füge ich eine Datei in einem Verzeichnis hinzu, in das ich alle relevanten Dateien in der richtigen Reihenfolge importiere. Auf diese Weise wird meine Hauptimportdatei wie folgt einfach und sauber:Sie können dies bei Bedarf auch für Unterverzeichnisse tun, aber ich denke nicht, dass die Struktur Ihrer CSS-Dateien zu tief sein sollte.
Obwohl ich diesen Ansatz verwende, denke ich immer noch, dass ein Glob-Import in Sass existieren sollte, für Situationen, in denen die Reihenfolge keine Rolle spielt, wie ein Verzeichnis von Mixins oder sogar Animationen.
quelle
Ich suche auch nach einer Antwort auf Ihre Frage. Entsprechend den Antworten existiert die korrekte Import-All-Funktion nicht.
Deshalb habe ich ein Python-Skript geschrieben, das Sie wie folgt in das Stammverzeichnis Ihres scss-Ordners einfügen müssen:
Es geht dann durch den Baum und findet alle scss-Dateien. Nach der Ausführung wird eine scss-Datei mit dem Namen main.scss erstellt
Ein Beispiel für eine Ausgabedatei:
quelle
Das hat gut funktioniert für mich
quelle
Sie können eine SASS-Datei generieren, die alles automatisch importiert. Ich verwende diese Gulp-Aufgabe:
Sie können die Importreihenfolge auch steuern, indem Sie die Ordner wie folgt bestellen:
quelle
Es könnte eine alte Frage sein, aber im Jahr 2020 immer noch relevant, daher könnte ich ein Update veröffentlichen. Seit dem Update vom 19. Oktober sollten wir im Allgemeinen @use anstelle von @import verwenden , aber das ist nur eine Bemerkung. Die Lösung für diese Frage besteht darin, Indexdateien zu verwenden, um das Einschließen ganzer Ordner zu vereinfachen. Beispiel unten.
https://sass-lang.com/documentation/at-rules/use#index-files
quelle
@forward
in Ihrem _index.scss anstelle von@use
Mit der Definition der zu importierenden Datei können alle allgemeinen Definitionen der Ordner verwendet werden.
So
@import "style/*"
werden alle Dateien im Stilordner kompiliert.Weitere Informationen zur Importfunktion in Sass finden Sie hier .
quelle