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