Sass loop function to import files

Question

How can I import multiple files using sass loop function? Here is my file tree structure.

/scss/ 
    /pages/
        /home/
            home.scss
            home-sm.scss
            home-md.scss
            home-lg.scss
        /about/
            about.scss
            about-sm.scss
            about-md.scss
            about-lg.scss
        /contact/
            contact.scss
            contact-sm.scss
            contact-md.scss
            contact-lg.scss
        pages.scss

And importing structure in pages.scss like below

//home
@import "home/home";
@import "home/home-xs";
@import "home/home-sm";
@import "home/home-md";
@import "home/home-lg";

//about
@import "about/about";
@import "about/about-xs";
@import "about/about-sm";
@import "about/about-md";
@import "about/about-lg";

//contact
@import "contact/contact";
@import "contact/contact-xs";
@import "contact/contact-sm";
@import "contact/contact-md";
@import "contact/contact-lg";

I want to reduce this import steps with sass mixins or function or similar.

Updated

Added some sass mixin code example that really I want

Note: This is only a demo purpose, @import not work in mixins.

@mixin importPage($pageName) { 
    /***********************
    // #{$pageName} page
    ***********************/
    @import "#{$pageName}/#{$pageName}";
    @import "#{$pageName}/#{$pageName}-xs";
    @import "#{$pageName}/#{$pageName}-sm";
    @import "#{$pageName}/#{$pageName}-md";
    @import "#{$pageName}/#{$pageName}-lg"; 
}

//Importing Files
@include importPage(home);  
@include importPage(about);  
@include importPage(contact);

Note: I think using @import "scss/**/*" method is not a good deal for some cases like prioritized ordering files, overriding, etc.

Any help would be appreciated.

Take a look at this answer https://stackoverflow.com/questions/4778627/is-it-possible-to-import-a-whole-directory-in-sass-using-import — Marko Letic, Jun 29 '18 at 07:53
Possible duplicate of [Is it possible to import a whole directory in sass using @import?](https://stackoverflow.com/questions/4778627/is-it-possible-to-import-a-whole-directory-in-sass-using-import) — Marko Letic, Jun 29 '18 at 07:53
I've looked on it, but the order of inclusion should be a matter. — Krish, Jun 29 '18 at 08:32
Can you move import statement of suffix files into the main one like `contact.scss` should contains `-xs`, `-sm`,`-md`,`-lg` files? It does not reduce the number of `import` statement but does help on categorizing & putting these files at the right place. — Toan Lu, Jun 29 '18 at 09:34
contact.scss file contains only general codes for the contacts page, we need to follow this file structure. — Krish, Jun 29 '18 at 09:37

Jakob E · Answer 1 · 2019-01-17T07:35:17.590

As mentioned you can do dir/*/ imports in Rails projects... please don't! By using a full import list you have an easy to read overview of your project and avoid unwanted imports and messed up order in case someone adds a new file. Here is how I would do it (using a list to skip redundant @import statements)

@import 
    // home
    'home/home',
    'home/home-xs',
    'home/home-sm',
    'home/home-md',
    'home/home-lg',

    // about
    'about/about',
    'about/about-xs',
    'about/about-sm',
    'about/about-md',
    'about/about-lg',

    // contact
    'contact/contact',
    'contact/contact-xs',
    'contact/contact-sm',
    'contact/contact-md',
    'contact/contact-lg'
;

Update You could create bundle files in each directory to simplify the main file import

// ––––––––––––––––––––––––––––––––––
// bundle home/_bundle.scss  
// ––––––––––––––––––––––––––––––––––
@import 
    'home/home',
    'home/home-xs',
    'home/home-sm',
    'home/home-md',
    'home/home-lg'
;

// ––––––––––––––––––––––––––––––––––
// bundle about/_bundle.scss  
// ––––––––––––––––––––––––––––––––––
@import 
    'about/about',
    'about/about-xs',
    'about/about-sm',
    'about/about-md',
    'about/about-lg'
 ;

// ––––––––––––––––––––––––––––––––––
// bundle contact/_bundle.scss  
// ––––––––––––––––––––––––––––––––––
@import 
    'contact/contact',
    'contact/contact-xs',
    'contact/contact-sm',
    'contact/contact-md',
    'contact/contact-lg'
;


// ––––––––––––––––––––––––––––––––––
//  Main file import
// ––––––––––––––––––––––––––––––––––
@import  
   'home/bundle',
   'about/bundle',
   'contact/bundle'
;

Thanks for this answer, But I'm really looking for some sass related mixins or function to reduce the file importing. I've updated the question with some sass mixin example. — Krish, Jan 17 '19 at 07:05
At the moment you can't do dynamic imports inside mixins or functions. I've added an alternative method based on a bundle file in each folder. It does not save you from the manual @imports – but it simplifies the final import.... you can see this used in libraries like susy https://github.com/oddbird/susy/blob/master/sass/_susy-prefix.scss — Jakob E, Jan 17 '19 at 07:45

Sass loop function to import files

1 Answers1