Is it possible to import a whole directory in sass using import

Question

I am modularizing my stylesheets with SASS partials like so    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   is there a way to include the whole partials directory it s a directory full of SASS-partials  like  import compass or something

User · Answer

I also search for an answer to your question. Correspond to the answers the correct import all function does not exist.

Thats why I have written a python script which you need to place into the root of your scss folder like so:

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

It will then walk through the tree and find all scss files. Once executed, it will create a scss file called 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)

an example of an output file:

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

User · Answer

It might be an old question  but still relevant in 2020  so I might post some update  Since Octobers 19 update we generally should use  use instead of  import  but that s only a remark  Solution to this question is use index files to simplify including whole folders  Example below        foundation  code scss code     padding   25em    line-height  0        foundation  lists scss ul  ol     text-align  left      amp   amp        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

User · Answer

You could use a bit of workaround by placing a sass file in folder what you would like to import and import all files in that file like this   file path main current  current scss   import  placeholders     import  colors    and in next dir level file you just use import for file what imported all files from that dir   file path main main scss   import  EricMeyerResetCSSv20     import  clearfix     import  current    That way you have same number of files  like you are importing the whole dir  Beware of order  file that comes last will override the matching stiles

User · Answer

http   sass-lang com docs yardoc file SASS REFERENCE html import  doesn t look like it   If any of these files always require the others  then have them import the other files and only import the top-level ones   If they re all standalone  then I think you re going to have to keep doing it like you are now

User · Answer

Check out the sass-globbing project

User · Answer

If you are using Sass in a Rails project  the sass-rails gem  https   github com rails sass-rails  features glob importing     import  foo           import all the files in the foo folder  import  bar           import all the files in the bar tree   To answer the concern in another answer  If you import a directory  how can you determine import order  There s no way that doesn t introduce some new level of complexity     Some would argue that organizing your files into directories can REDUCE complexity    My organization s project is a rather complex app  There are 119 Sass files in 17 directories  These correspond roughly to our views and are mainly used for adjustments  with the heavy lifting being handled by our custom framework  To me  a few lines of imported directories is a tad less complex than 119 lines of imported filenames   To address load order  we place files that need to load first     mixins  variables  etc      in an early-loading directory  Otherwise  load order is and should be irrelevant    if we are doing things properly

User · Answer

This feature will never be part of Sass  One major reason is import order  In CSS  the files imported last can override the styles stated before  If you import a directory  how can you determine import order  There s no way that doesn t introduce some new level of complexity  By keeping a list of imports  as you did in your example   you re being explicit with import order  This is essential if you want to be able to confidently override styles that are defined in another file or write mixins in one file and use them in another   For a more thorough discussion  view this closed feature request here

User · Answer

The accepted answer by Dennis Best states that  Otherwise  load order is and should be irrelevant    if we are doing things properly   This is simply incorrect  If you are doing things properly  you make use of the css order to help you reduce specificity and keeping you css simple and clean   What I do to organize imports is adding an  all scss file in a directory  where I import all the relevant files in it  in the correct order  This way  my main import file will be simple and clean  like this      Import all scss in the project     Utilities  mixins and placeholders  import  utils  all       Styles  import  components  all    import  modules  all    import  templates  all     You could do this for sub-directories as well  if you need  but I don t think the structure of your css files should be too deep   Though I use this approach  I still think a glob import should exist in sass  for situations where order does not matter  like a directory of mixins or even animations

User · Answer

You might want to retain source order then you can just use this    import    foo      bar     I prefer this

User · Answer

I create a file named   partials   scss in the same directory of partials   -   partials   scss  -  partials     -   header   scss     -   viewport   scss     -        In   partials   scss  I wrote these    import  partials header    import  partials viewport    import  partials footer    import  partials forms          So  when I want import the whole partials  just write  import  partials   If I want import any of them  I can also write  import  partials header

User · Answer

this worked fine for me   import  folder

User · Answer

With defining the file to import it s possible to use all folders common definitions    So   import  style    will compile all the files in the style folder   More about import feature in Sass you can find here

User · Answer

You can generate SASS file which imports everything automatically  I use this Gulp task   concatFilenames   require  gulp-concat-filenames    let concatFilenamesOptions         root            prepend    import         append        gulp task  sass-import        gt        gulp src path src sass           pipe concatFilenames  app sass   concatFilenamesOptions            pipe gulp dest    build         You can also control importing order by ordering the folders like this   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

[import] Is it possible to import a whole directory in sass using @import?

Examples related to import

Examples related to sass

Examples related to partials