42

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';
toms
  • 515
  • 6
  • 23
Timidfriendly
  • 3,224
  • 4
  • 27
  • 36
  • 7
    What happens when you have two files `__test.scss` and `_test.scss` and you `@import "_test"` – Mike Causer Aug 05 '15 at 01:30
  • Related: [`Why put in front of the file name “_” or “_” in scss/css?`](https://stackoverflow.com/questions/34889962/why-put-in-front-of-the-file-name-or-in-scss-css). – Gabriel Staples Dec 31 '20 at 06:09

3 Answers3

29

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
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • If by default the engine checks for `_foo.scss`, surely it would be fastest to use `@import "foo";`. Precious milliseconds! – Mike Causer Aug 05 '15 at 01:34
  • 7
    What a very strange design decision - to treat the files as the same. – dKen Nov 04 '15 at 12:45
  • __Be aware:__ The SASS team is deprecating the use of `@import` in favor of `@use`. You can check it all out here: https://sass-lang.com/documentation/at-rules/import – flyingace Feb 14 '20 at 15:12
22

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

Nesha Zoric
  • 6,218
  • 42
  • 34
  • 1
    I think OP was asking more about during the import process. If you are compiling main.scss, and main has two imports ```foo.scss and _bar.scss``` these will be compiled in the same way. The sass compiler doesn't treat them differently in this case. – EvSunWoodard Aug 15 '19 at 13:21
0

@import 'normalize-scss/_normalize';

This will simply treat the _normalize.scss file as not partial.

So, if you want that file to be a partial file. then you add another underscore in the front of the actual file name. so the file name will be __normalize.scss.

Jovylle
  • 859
  • 7
  • 17