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

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?

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.

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:

Schauen Sie sich das Sass-Globbing-Projekt an .

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

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.

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

@import
  'foo',
  'bar';

Ich bevorzuge das.

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.

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.

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

Das hat gut funktioniert für mich

@import 'folder/*';

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
]

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

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 .