258

Why put _ in front of the filename in scss?

_filename.scss - Why does it need _ ?

Gabriel Staples
  • 36,492
  • 15
  • 194
  • 265
Niko_D
  • 2,787
  • 2
  • 10
  • 7

7 Answers7

243

The _ (underscore) is a partial for scss. That means the stylesheet its going to be imported (@import) to a main stylesheet i.e. styles.scss. The advantage on using partials is that you can use many files to organize your code and everything will be compiled on a single file.

Fabian Parra
  • 2,554
  • 2
  • 10
  • 3
  • 43
    Oh thank you for pointing out my mistake. "but `import '_file';` and `import 'file';` does the same thing right?" – tom10271 Nov 14 '17 at 00:47
  • 14
    If I structure my files in a way that I only ever send a single file to my compiler/preprocessor, why does it matter if my files are prepended with `_`? I'm considering removing the underscore from my file names. Whether or not a Sass file is a partial (i.e an importable piece of code) should depend on its location in your project's architecture, not how the file is named. – ESR Dec 30 '17 at 11:34
  • 8
    @ESR: Agreed, this feature feels a little outdated in a modern web dev environment. You definitely don't need the `_`s if you have your project structured in a reasonable way. – Chris Jaynes May 01 '19 at 16:13
  • Why isn't `import '_file'` the preferred form? (Correct me if I'm wrong here, but it doesn't usually seem to be.) Since that is what the partial file *actually* is called. There might not even be a file called `file.scss`... – Johan May 25 '20 at 11:42
  • 5
    One important fact is missing, if you omit the underscore the import will still work, but for every scss file there will be a generated css file. Normally you don't want/need that and if they contain just mixins they usually will be 0 bytes long. – RiZKiT Aug 29 '22 at 11:48
  • `@import` has been superseded by `@use` – Merchako Feb 01 '23 at 03:18
84

When you include "_" in front of the file name, it won't be generated into CSS unless you import it into another sass files which is not partial.

suppose your folder structure is like this

/scss
 style.scss
 _list.scss
/css

if you run the command

sass --watch scss:css

only style.css and style.css.map files will be created, sass compiler will omit _list.scss without converting its content into a CSS file.

/scss
 style.scss
 _list.scss
/css
 style.css
 style.css.map

the only way that you can use partials is to import them into another .scss file with 

@import 'list.scss';

if you remove the '_' in front of _list.scss the outcome of the command will be

/scss
 style.scss
 list.scss
/css
 style.css
 style.css.map
 list.css
 list.css.map

The main purpose of using partials is to break down our CSS code into several pieces which are easier to maintain. Hope this helps. Thanks.

Baleato
  • 849
  • 9
  • 19
dmcshehan
  • 1,109
  • 7
  • 14
  • 8
    This is the right answer. But, you also didn't mention the special case of _index.scss: https://sass-lang.com/documentation/at-rules/import#index-files – tiffon Dec 05 '19 at 16:00
74

A sass file starting with an underscore is a partial. It is a good way to keep your styles separated into logical sections. These files all get merged on compilation when you use @import.

From the Sass language guide:

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

http://sass-lang.com/guide

Fabian Lauer
  • 8,891
  • 4
  • 26
  • 35
cameronjonesweb
  • 2,435
  • 3
  • 25
  • 37
17

Files with _ (underscore) are ignored by compiler. However, all those files are imported into single, main SCSS file (i.e. styles.scss) which is actually the file that is compiled (it doesn't have _ (underscore) in it's name)

The final goal is to compile only one SCSS file, and to have only one CSS file as a result of that, which has various advantages.

Tahi Reu
  • 558
  • 1
  • 8
  • 19
  • 1
    If your using a system like webpack where it bundles and minifies your entire css it doesn't seem like you really need to use partials. Am I wrong? – gimp3695 Oct 22 '20 at 04:57
2

_ is used to denote partials. These partials contains the variables and internal functions that are required in the pre-processing stage, and they are not required to be compiled as css. _ partial templates contains utils, scss local variables and functions required in the compilation of the scss to css.

Vijay122
  • 884
  • 8
  • 12
2

Here is what the documentation says:

As a convention, Sass files that are only meant to be loaded as modules [to be imported], not compiled on their own, begin with _ (as in _code.scss). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.

Also, note that Sass partials should not be used with @import, but with @use instead:

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

This is beyond the scope of the original question, but in case you're curious, here is why:

The @import rule has a number of serious issues:

  • @import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.
  • Because everything’s global, libraries must prefix to all their members to avoid naming collisions.
  • @extend rules are also global, which makes it difficult to predict which style rules will be extended.
  • Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.
  • There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.
Yann
  • 21
  • 2
-1

Also using the watcher of node-sass in a node environment will result in error messages if you do without the underscore prefix, see https://github.com/sass/node-sass/issues/2762

Joachim
  • 308
  • 1
  • 3
  • 10