Sass @import using leading underscore

Question

I understand that it is best practise to import SASS/SCSS partials without using the leading underscore; e.g.

@import 'normalize-scss/normalize';  // this imports ./normalize-scss/_normalize.scss 

My question for nerdy completeness is, are there any consequences if the file is imported using the underscore?

@import 'normalize-scss/_normalize'; 

Answer 1

No. If your file is _foo.scss, all of these imports have identical results as long as you don't have any ambiguous filenames (barring any side effects that might exist):

@import "foo"; @import "foo.scss"; @import "_foo"; @import "_foo.scss"; 

Files with the same name but different extension

The only time an extension is necessary is if you have both _foo.scss and _foo.sass in the same search path. You'll get the following error if you don't specify which one:

    error sass/test.scss (Line 7: It's not clear which file to import for '@import "test/bar"'. Candidates:   test/_bar.sass   test/_bar.scss Please delete or rename all but one of these files. ) 

Files with the same name, but one is prefixed with an underscore

If you have both foo.scss and _foo.scss, then foo.scss will take precedence. If you want _foo.scss instead, you'll need to add the underscore to your import statement.

@import "test/_foo"; 

Sass will nag you with a warning every time you save no matter what your import statement looks like:

WARNING: In /path/to/test:   There are multiple files that match the name "bar.scss":     _bar.scss     bar.scss 

Answer 2

If you add an underscore to the start of the file name, Sass won’t compile it. So, if you don’t want colors.scss to compile to colors.css, name the file _colors.scss instead. Files named this way are called partials in Sass terminology.

More about import feature in Sass you can find here