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

Je modularise mes feuilles de style avec les 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 

y a-t-il un moyen d’inclure tout le répertoire des partials (c’est un répertoire complet de partiels SASS) comme la boussole @import ou quelque chose?

Si vous utilisez Sass dans un projet Rails, le joyau de sass-rails, https://github.com/rails/sass-rails , comporte une 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 au problème 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 de ne pas introduire 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 existe 119 fichiers Sass dans 17 répertoires. Celles-ci correspondent grosso modo à nos points de vue et sont principalement utilisées pour les ajustements, le chargement lourd é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 adresser l’ordre de chargement, nous plaçons les fichiers qui doivent d’abord charger – mixins, variables, etc. – dans un répertoire de chargement anticipé. 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. L’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 la commande d’importation? Il n’y a aucun moyen de ne pas introduire un nouveau niveau de complexité. En conservant une liste des importations (comme vous l’avez fait dans votre exemple), vous êtes explicite avec la commande d’importation. Ceci est essentiel si vous voulez pouvoir écraser en toute confiance des 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__.scss dans le même répertoire que les 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 les partials entiers, écrivez simplement @import "partials" . Si je veux en importer, je peux aussi écrire @import "partials/header" .

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

chemin du fichier: main / current / _current.scss

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

et dans le fichier de niveau dir 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 vous importez le répertoire entier. Méfiez-vous de l’ordre, le fichier qui vient en dernier remplace les stiles correspondants.

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

ça ne ressemble pas à ça.

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

Vous voudrez peut-être conserver la commande de la source alors vous pouvez simplement l’utiliser.

 @import 'foo', 'bar'; 

Je préfère ça.

CA marchait bien pour moi

 @import 'folder/*'; 

Je cherche également une réponse à votre question. Correspond à la réponse, l’importation correcte de toutes les fonctions n’existe pas.

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

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

Il parcourra alors l’arbre 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'; 

La réponse acceptée par Dennis Best affirme que “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 net.

Ce que je fais pour organiser les importations consiste à append un fichier _all.scss dans un répertoire où _all.scss 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 pourriez aussi faire cela 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 de glob devrait exister dans sass, pour les situations où l’ordre n’a pas d’importance, comme un répertoire de mixins ou même d’animations.

Avec la définition du fichier à importer, il est possible d’utiliser toutes les définitions communes des dossiers.

Ainsi, @import "style/*" comstackra tous les fichiers du dossier de style.

Vous trouverez plus d’informations sur les fonctionnalités d’importation dans Sass ici .