Why put in front of the file name “_” or “_” in scss/css?

Question

Why put _ in front of the filename in scss?

_filename.scss - Why does it need _ ?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

_ 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.

Answer 5

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

Answer 6

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.