Est-il possible d'importer un répertoire entier dans sass en utilisant @import?

Je modularise mes feuilles de style avec des partiels SASS comme ceci:

@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

existe-t-il un moyen d'inclure tout le répertoire des partiels (c'est un répertoire plein de partiels SASS) comme @import compass ou quelque chose?

Si vous utilisez Sass dans un projet Rails, le joyau sass-rails, https://github.com/rails/sass-rails , propose l'importation globale.

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

Pour répondre à la préoccupation dans une autre réponse "Si vous importez un répertoire, comment pouvez-vous déterminer l'ordre d'importation? Il n'y a aucun moyen qui n'introduise un nouveau niveau de complexité."

Certains diront que l'organisation de vos fichiers dans des répertoires peut RÉDUIRE la complexité.

Le projet de mon organisation est une application assez complexe. Il y a 119 fichiers Sass dans 17 répertoires. Ceux-ci correspondent à peu près à nos vues et sont principalement utilisés pour les ajustements, le levage de charges lourdes étant géré par notre cadre personnalisé. Pour moi, quelques lignes de répertoires importés sont un peu moins complexes que 119 lignes de noms de fichiers importés.

Pour répondre à l'ordre de chargement, nous plaçons les fichiers qui doivent d'abord être chargés - mixins, variables, etc. - dans un répertoire à chargement précoce. Sinon, l'ordre de chargement est et ne devrait pas être pertinent ... si nous faisons les choses correctement.

Cette fonctionnalité ne fera jamais partie de Sass. Une des principales raisons est la commande d'importation. En CSS, les fichiers importés en dernier peuvent remplacer les styles indiqués précédemment. Si vous importez un répertoire, comment pouvez-vous déterminer l'ordre d'importation? Il n'y a aucun moyen qui n'introduise un nouveau niveau de complexité. En conservant une liste d'importations (comme vous l'avez fait dans votre exemple), vous êtes explicite avec l'ordre d'importation. Ceci est essentiel si vous voulez pouvoir remplacer en toute confiance les styles définis dans un autre fichier ou écrire des mixins dans un fichier et les utiliser dans un autre.

Pour une discussion plus approfondie, consultez cette demande de fonctionnalité fermée ici:

Découvrez le projet sass-globbing .

Je crée un fichier nommé __partials__.scssdans le même répertoire departials

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

Dans __partials__.scss, j'ai écrit ceci:

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

Donc, quand je veux importer le tout partials, il suffit d'écrire @import "partials". Si je veux importer l'un d'eux, je peux aussi écrire @import "partials/header".

Vous pouvez utiliser un peu de solution de contournement en plaçant un fichier sass dans le dossier que vous souhaitez importer et importer tous les fichiers de ce fichier comme ceci:

chemin du fichier: main / current / _current.scss

@import "placeholders"; @import "colors";

et dans le fichier de niveau dir suivant, vous utilisez simplement import for file ce qui a importé tous les fichiers de ce dir:

chemin du fichier: main / main.scss

@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";

De cette façon, vous avez le même nombre de fichiers, comme si vous importiez le répertoire entier. Méfiez-vous de l'ordre, le fichier qui vient en dernier remplacera les montants correspondants.

Vous voudrez peut-être conserver l'ordre source, vous pouvez simplement l'utiliser.

@import
  'foo',
  'bar';

Je préfère ça.

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import

ne ressemble pas à ça.

Si l'un de ces fichiers nécessite toujours les autres, demandez-leur d'importer les autres fichiers et d'importer uniquement les fichiers de niveau supérieur. S'ils sont tous autonomes, je pense que vous devrez continuer à le faire comme vous le faites maintenant.

La réponse acceptée par Dennis Best déclare que "Sinon, l'ordre de chargement est et devrait être hors de propos ... si nous faisons les choses correctement." C'est tout simplement incorrect. Si vous faites les choses correctement, vous utilisez l'ordre css pour vous aider à réduire la spécificité et à vous garder css simple et propre.

Ce que je fais pour organiser les importations, c'est ajouter un _all.scssfichier dans un répertoire, où j'y importe tous les fichiers pertinents, dans le bon ordre. De cette façon, mon fichier d'importation principal sera simple et propre, comme ceci:

// Import all scss in the project

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

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

Vous pouvez également le faire pour les sous-répertoires, si vous en avez besoin, mais je ne pense pas que la structure de vos fichiers CSS devrait être trop profonde.

Bien que j'utilise cette approche, je pense toujours qu'une importation globale devrait exister dans sass, pour les situations où l'ordre n'a pas d'importance, comme un répertoire de mixins ou même des animations.

Je recherche également une réponse à votre question. Correspond aux réponses, la fonction d'importation correcte n'existe pas.

C'est pourquoi j'ai écrit un script python que vous devez placer à la racine de votre dossier scss comme ceci:

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

Il parcourra ensuite l'arborescence et trouvera tous les fichiers scss. Une fois exécuté, il créera un fichier scss appelé main.scss

#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)

un exemple de fichier de sortie:

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

CA marchait bien pour moi

@import 'folder/*';

Vous pouvez générer un fichier SASS qui importe tout automatiquement, j'utilise cette tâche Gulp:

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'))
})

Vous pouvez également contrôler l'ordre d'importation en commandant les dossiers comme ceci:

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
]

Ce pourrait être une vieille question, mais toujours d'actualité en 2020, donc je pourrais poster une mise à jour. Depuis la mise à jour d' octobre 19 , nous devrions généralement utiliser @use au lieu de @import , mais ce n'est qu'une remarque. La solution à cette question consiste à utiliser des fichiers d'index pour simplifier l'inclusion de dossiers entiers. Exemple ci-dessous.

// 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

En définissant le fichier à importer, il est possible d'utiliser toutes les définitions communes des dossiers.

Donc, @import "style/*"compilera tous les fichiers dans le dossier de style.

Pour en savoir plus sur la fonction d'importation dans Sass, cliquez ici .