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


209

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?


3
Pas la réponse mais utile: SASS peut importer plusieurs fichiers en une seule importation, comme @import 'partials/header', 'partials/viewport', 'partials/footer';.
llobet

Réponses:


201

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.


7
ou ajoutez @import "*"(dans application.css.scss) si les fichiers css / scss de votre contrôleur se trouvent dans le dossier "app / assets / stylesheets" avec application.css.scss.
Magne

ce "joyau" est bogué et ne fonctionne pas sur Windows, voyez ce problème qui est ouvert depuis longtemps et signifie qu'il est complètement cassé github.com/chriseppstein/sass-globbing/issues/3
pilavdzice

Vous parlez du petit bijou de Chris Eppstein. Ma réponse utilise le bijou sass-rails, qui est différent je pense. Je ne suis pas sous Windows, mais je ne vois aucun problème lié à la gemme sass-rails.
Dennis Best

1
Cela n'a pas fonctionné pour moi - Le globbing a été décomposé en lignes individuelles vanille css @import de fichiers individuels. Qui méchamment, fonctionnait en développement, mais pas en production (car il n'y a qu'un seul chemin d'accès aux ressources racine d'application.css en production)
Peter Ehrlich

5
A très bien fonctionné pour moi, merci pour cette astuce. Je suis agréablement surpris que le fait de dire @import "*"dans application.scss inclut tous les autres fichiers présents dans le même répertoire mais ne ré-inclut pas application.scss ... Je m'attendais à obtenir un bug de boucle infini.
Topher Hunt

94

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:


260
pour les fichiers CSS bien structurés, l'ordre d'inclusion ne devrait pas avoir d'importance
Milovan Zogovic

57
@MilovanZogovic S'appuyer fortement sur les remplacements a une odeur de code, mais il n'y a rien de mal à utiliser la cascade. C'est ainsi que la langue a été conçue.
Brandon Mathis

34
@BrandonMathis Je comprends la pureté théorique ici, mais dans une implémentation (la mienne et je suppose corrodée), vous pouvez choisir d'écrire votre CSS de telle manière que les différents fichiers n'aient aucun impact les uns sur les autres. J'ai un répertoire appelé "modules" avec des fichiers qui contiennent chacun une règle de classe css différente. Je veux que tous les fichiers de ce répertoire soient inclus, et leur ordre n'est pas, et par conception ne sera jamais, important. C'est pénible de devoir mettre à jour la liste chaque fois que j'en ajoute une nouvelle.
Robin Winslow

5
Si j'ai un répertoire rempli de CSS non applicables, de% de règles, de fonctions, etc., il n'y a aucun risque et le contraire (ne pas autoriser) conduit simplement à des ennuis inutiles et à de longs "en-têtes d'importation" dans les fichiers au lieu de ce qui pourrait simplement être un ligne unique de @import "/functions"ou @import "partials/".
srcspider

3
Un cas d'utilisation est l'importation de modules, où l'ordre n'est pas important et les styles peuvent être nommés ... Je voudrais voir cette fonction - mais je suis d'accord qu'elle devrait être utilisée à bon escient ...
Will Hancock

41

Découvrez le projet sass-globbing .


1
mon commentaire est obsolète de quelques années, mais ... le projet sass-globbing a des progrès très lents, et un seul développeur qui ne se soucie pas trop de faire fonctionner les choses sur Windows. Nous commençons tout juste à en créer un nouveau qui fonctionne sur Linux, Mac et Windows
Stuart

33

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


2
C'est une assez bonne solution. C'est ce que fait la boussole pour simplifier leur inclusion +1
Jethro Larson

8
C'est fondamentalement la même que la configuration OP. Il aimerait importer les fichiers sans ajouter manuellement les @import 'partials/xyz'instructions chaque fois qu'un nouveau partiel est créé.
gyo

1
Downvoters + Upvoters: pouvez-vous expliquer en quoi cette réponse est différente de la configuration OP?
gyo

4
Cela ne résout rien.
oligofren

2
@gyo Cela n'aide pas l'OP s'ils n'ont qu'un seul répertoire de partiels, mais cela aide les gens avec plusieurs répertoires de partiels. Si j'ai des répertoires formset widgets, je peux @import "forms"; @import "widgets"dans le fichier CSS principal d'une page, et ne me soucier que de tous les partiels individuels ( @import forms/text; @import forms/button...) à l'intérieur forms.scsset widgets.scss.
ttotherat

4

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.


3

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

@import
  'foo',
  'bar';

Je préfère ça.


2

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.


ouais vu la documentation, juste vérifié si quelqu'un connaissait une astuce ou espérant que c'était juste non documenté lol. Merci pour la suggestion
corrodé le

2

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.


Si vous utilisez une approche comme RSCSS, la spécificité est égale et chaque composant ne s'applique que là où il le faut sans conflits.
RWDJ

1

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

0

CA marchait bien pour moi

@import 'folder/*';

7
Je pense que c'est à cause de la fonction rubis et non du SASS. Certains compilateurs ont des problèmes avec cette méthode. Par exemple, j'ai utilisé ceci par gulp-ruby-sass et cela a fonctionné, mais en utilisant gulp-sass, cela a soulevé une erreur.
Morteza Ziyae

0

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
]

0

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


1
Je pense que vous voulez utiliser @forwarddans votre _index.scss au lieu de@use
Isaac Pak

-4

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 .

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.