Ist es möglich, mit @import ein ganzes Verzeichnis in sass zu importieren?

209

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?

korrodiert
quelle
3
Nicht die Antwort, aber nützlich: SASS kann mehrere Dateien in einem Import importieren, wie z @import 'partials/header', 'partials/viewport', 'partials/footer';.
llobet

Antworten:

201

Wenn Sie Sass in einem Rails-Projekt verwenden, bietet das Sass-Rails-Juwel https://github.com/rails/sass-rails Glob-Import.

@import "foo/*"     // import all the files in the foo folder
@import "bar/**/*"  // import all the files in the bar tree

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.

Dennis Best
quelle
7
oder fügen Sie @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.
Magne
Dieses "Juwel" ist fehlerhaft und funktioniert nicht unter Windows. Sehen Sie sich dieses Problem an, das schon lange offen ist und im Wesentlichen bedeutet, dass es vollständig kaputt ist. github.com/chriseppstein/sass-globbing/issues/3
pilavdzice
Du sprichst von Chris Eppsteins sass-globbing Juwel. Meine Antwort verwendet den Edelstein Sass-Rails, der meiner Meinung nach anders ist. Ich bin nicht unter Windows, aber ich sehe keine Probleme im Zusammenhang mit dem Edelstein Sass-Rails.
Dennis Best
1
Dies hat bei mir nicht funktioniert - Das Globbing wurde in einzelne Vanilla CSS @ Import-Zeilen einzelner Dateien unterteilt. Was böse war, funktionierte in der Entwicklung, aber nicht in der Produktion (da es nur den einen Root-Asset-Pfad von application.css in der Produktion gibt)
Peter Ehrlich
5
Hat super für mich funktioniert, danke für diesen Tipp. Ich bin angenehm überrascht, dass das Sprichwort @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.
Topher Hunt
94

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:

Brandon Mathis
quelle
260
Für gut strukturierte CSS-Dateien sollte die Reihenfolge der Aufnahme keine Rolle spielen
Milovan Zogovic
56
@MilovanZogovic Wenn man sich stark auf Überschreibungen verlässt, riecht es nach Code, aber die Verwendung der Kaskade ist nicht unangemessen. So wurde die Sprache gestaltet.
Brandon Mathis
34
@BrandonMathis Ich verstehe die theoretische Reinheit hier, aber in einer Implementierung (meine und ich nehmen korrodierte an) können Sie Ihr CSS so schreiben, dass die verschiedenen Dateien keinen Einfluss aufeinander haben. Ich habe ein Verzeichnis namens "Module" mit Dateien, die jeweils eine andere CSS-Klassenregel enthalten. Ich möchte, dass alle Dateien in diesem Verzeichnis enthalten sind, und ihre Reihenfolge ist nicht wichtig und wird von Natur aus niemals wichtig sein. Es ist mühsam, die Liste jedes Mal zu aktualisieren, wenn ich eine neue hinzufüge.
Robin Winslow
5
Wenn ich ein Verzeichnis habe, das mit nicht zutreffenden CSS-,% -Regeln, -Funktionen usw. gefüllt ist, besteht kein Risiko, und das Gegenteil (nicht zulässig) führt nur zu nutzloser Langeweile und langen "Import-Headern" in Dateien anstelle dessen, was nur ein sein könnte einzelne Zeile von @import "/functions"oder @import "partials/".
srcspider
3
Ein Anwendungsfall ist das Importieren von Modulen, bei denen die Reihenfolge nicht wichtig ist und Stile möglicherweise einen Namespace haben ... Ich würde diese Funktion gerne sehen - obwohl ich damit einverstanden bin, dass sie mit Bedacht verwendet werden müsste ...
Will Hancock
41

Schauen Sie sich das Sass-Globbing-Projekt an .

Akshay Rawat
quelle
1
Mein Kommentar ist um ein paar Jahre veraltet, aber ... das Sass-Globbing-Projekt hat einige ernsthaft langsame Fortschritte gemacht, und nur ein einziger Entwickler, der sich nicht allzu sehr darum kümmert, dass die Dinge unter Windows funktionieren. Wir fangen gerade an, eine neue zu machen, die unter Linux, Mac und Windows funktioniert
Stuart
33

Ich erstelle eine Datei mit dem Namen __partials__.scssim selben Verzeichnis vonpartials

|- __partials__.scss
|- /partials
   |- __header__.scss
   |- __viewport__.scss
   |- ....

In __partials__.scssschrieb ich diese:

@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....

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

fen
quelle
2
Das ist eine ziemlich gute Lösung. Es ist, was Kompass tut, um ihre Aufnahme zu vereinfachen +1
Jethro Larson
8
Dies entspricht im Wesentlichen dem OP-Setup. Er möchte die Dateien importieren, ohne die @import 'partials/xyz'Anweisungen jedes Mal manuell hinzuzufügen, wenn ein neuer Teil erstellt wird.
Gyo
1
Downvoters + Upvoters: Können Sie bitte erklären, wie sich diese Antwort vom OP-Setup unterscheidet?
Gyo
4
Das löst nichts.
Oligofren
2
@gyo Es hilft dem OP nicht, wenn sie nur ein Verzeichnis von Partials haben, aber es hilft Leuten mit mehreren Verzeichnissen von Partials. Wenn ich Verzeichnisse habe, kann ich in der CSS-Hauptdatei eine Seite erstellen formsund widgetsmich @import "forms"; @import "widgets"nur um alle einzelnen Partials ( @import forms/text; @import forms/button...) in forms.scssund kümmern widgets.scss.
ttotherat
4

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.

IGRACH
quelle
3

Möglicherweise möchten Sie die Quellreihenfolge beibehalten, dann können Sie diese einfach verwenden.

@import
  'foo',
  'bar';

Ich bevorzuge das.

Dewwwald
quelle
2

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.

xaxxon
quelle
Ja, ich habe die Dokumentation gesehen und nur überprüft, ob jemand einen Trick kannte oder hoffte, dass er nur ohne Papiere war. lol. Vielen Dank für den Vorschlag
korrodiert
2

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.scssUm 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:

// Import all scss in the project

// Utilities, mixins and placeholders
@import 'utils/_all';

// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';

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.

BRN
quelle
Wenn Sie einen Ansatz wie RSCSS verwenden, ist die Spezifität gleich und jede Komponente wird nur dort angewendet, wo dies ohne Konflikte erforderlich ist.
RWDJ
1

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:

- scss
  |- scss-crawler.py
  |- abstract
  |- base
  |- components
  |- layout
  |- themes
  |- vender

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

#python3
import os

valid_file_endings = ["scss"]

with open("main.scss", "w") as scssFile:
    for dirpath, dirs, files in os.walk("."):
        # ignore the current path where the script is placed
        if not dirpath == ".":
            # change the dir seperator
            dirpath = dirpath.replace("\\", "/")

            currentDir = dirpath.split("/")[-1]
            # filter out the valid ending scss
            commentPrinted = False
            for file in files:
                # if there is a file with more dots just focus on the last part
                fileEnding = file.split(".")[-1]
                if fileEnding in valid_file_endings:
                    if not commentPrinted:
                        print("/* {0} */".format(currentDir), file = scssFile)
                        commentPrinted = True
                    print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile)

Ein Beispiel für eine Ausgabedatei:

/* abstract */
@import './abstract/colors';
/* base */
@import './base/base';
/* components */
@import './components/audioPlayer';
@import './components/cardLayouter';
@import './components/content';
@import './components/logo';
@import './components/navbar';
@import './components/songCard';
@import './components/whoami';
/* layout */
@import './layout/body';
@import './layout/header';
Sens4
quelle
0

Das hat gut funktioniert für mich

@import 'folder/*';
Siddhartha Mukherjee
quelle
7
Ich denke, das liegt an der Ruby-Funktion, nicht an SASS. Einige Compiler haben Probleme mit dieser Methode. Zum Beispiel habe ich dies von gulp-ruby-sass verwendet und es hat funktioniert, aber mit gulp-sass hat es einen Fehler ausgelöst.
Morteza Ziyae
0

Sie können eine SASS-Datei generieren, die alles automatisch importiert. Ich verwende diese Gulp-Aufgabe:

concatFilenames = require('gulp-concat-filenames')

let concatFilenamesOptions = {
    root: './',
    prepend: "@import '",
    append: "'"
}
gulp.task('sass-import', () => {
    gulp.src(path_src_sass)
        .pipe(concatFilenames('app.sass', concatFilenamesOptions))
        .pipe(gulp.dest('./build'))
})

Sie können die Importreihenfolge auch steuern, indem Sie die Ordner wie folgt bestellen:

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]
Miro Junker
quelle
0

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.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@use 'code';
@use 'lists';

// style.scss
@use 'foundation';

https://sass-lang.com/documentation/at-rules/use#index-files

Denker
quelle
1
Ich denke, Sie möchten @forwardin Ihrem _index.scss anstelle von@use
Isaac Pak
-4

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 .

Nesha Zoric
quelle