Shorter way to import with Scss/Sass

Question

I use Scss (gulp-sass) and it's a long list of includes that looks kind of like this:

@import '../../snippets/menu/menu.scss';
@import '../../snippets/footer/footer.scss';
@import '../../snippets/hero/hero.scss';

From this I can see a pattern. My question is if there is a nice way to make it simpler to write. Maybe something like this?

import('menu');
import('footer');
import('hero');

The output for scss should still be like the first snippet.

Possible duplicate of [Is it possible to import a whole directory in sass using @import?](http://stackoverflow.com/questions/4778627/is-it-possible-to-import-a-whole-directory-in-sass-using-import) — 6754534367, Sep 29 '16 at 12:20
@hardcodepunk I'm using gulp-sass, forgot to mention that. Your suggestion does only support Rails. But else a nice solution. — Jens Törnell, Sep 29 '16 at 12:23
@hardcodepunk NOT duplicate by the way... "This feature will never be part of Sass. One major reason is import order." — Jens Törnell, Sep 29 '16 at 12:25

score 1 · Accepted Answer · answered Sep 29 '16 at 12:32

1

I was pushed in the right direction in the comments and the solution was a bit different than I expected. Now I use:

I allows for syntax like this:

@import '../../snippets/**/*';

answered Sep 29 '16 at 12:32

Jens Törnell

1 Answers1