web-dev-qa-db-fra.com

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 partials (c'est un répertoire plein de partiels SASS) comme @import compass ou quelque chose d'autre?

importsasspartials
194
corroded

Si vous utilisez Sass dans un projet Rails, le joyau de sass-Rails, https://github.com/Rails/sass-Rails , permet d'importer globalement.

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

Pour répondre à cette 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 que cela n'introduise pas 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 plutôt complexe. Il y a 119 fichiers Sass dans 17 répertoires. Celles-ci correspondent à peu près à nos points de vue et sont principalement utilisées pour les ajustements, le lourd fardeau étant traité par notre infrastructure personnalisée. Pour moi, quelques lignes de répertoires importés sont un peu moins complexes que 119 lignes de noms de fichiers importés.

Pour traiter l’ordre de chargement, nous plaçons les fichiers qui doivent être chargés en premier - mixins, variables, etc. - dans un répertoire de chargement précoce. Sinon, l'ordre de chargement est et devrait être sans importance ... si nous faisons les choses correctement.

190
Dennis Best

Cette fonctionnalité ne fera jamais partie de Sass. L'une des principales raisons est l'ordre d'importation. En CSS, les derniers fichiers importés 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 que cela n'introduise pas un nouveau niveau de complexité. En conservant une liste des importations (comme vous l'avez fait dans votre exemple), vous êtes explicite avec l'ordre d'importation. Cela 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, regardez cette demande de fonctionnalité fermée ici:

91
Brandon Mathis

Découvrez le projet sass-globbing .

40
Akshay Rawat

Je crée un fichier nommé __partials__.scss dans le même répertoire que partials

|- __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 tout le partials, il suffit d'écrire @import "partials". Si je veux importer l'un d'entre eux, je peux aussi écrire @import "partials/header".

33
fen

Vous pouvez utiliser un peu de solution de contournement en plaçant dans un dossier le fichier sass 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 de répertoire suivant, vous utilisez simplement import pour fichier ce qui a importé tous les fichiers de ce répertoire:

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. Attention à l'ordre, le fichier qui arrive en dernier remplacera les stiles correspondants.

4
IGRACH

La réponse acceptée par Dennis Best indique qu '"sinon, l'ordre de chargement est et devrait être sans importance ... si nous faisons les choses correctement." Ceci 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 simple et propre.

Ce que je fais pour organiser les importations, c’est d’ajouter un fichier _all.scss dans un répertoire, dans lequel j’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 soit trop profonde.

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

2
BRN

Vous voudrez peut-être conserver l'ordre des sources alors vous pourrez simplement l'utiliser.

@import
  'foo',
  'bar';

Je préfère ça.

2
dewwwald

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

C’est la raison pour laquelle j’ai écrit un script python que vous devez placer à la racine de votre dossier scss, comme suit:

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

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

ne ressemble pas à ça.

Si l'un de ces fichiers requiert 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, alors je pense que vous allez devoir continuer comme avant.

1
xaxxon

cA marchait bien pour moi

@import 'folder/*';
0
Siddhartha Mukherjee

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 suit:

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
]
0
Miro Junker