Why put in front of the file name “_” or “_” in sc

问题:

Why put _ in front of the filename in scss?

_filename.scss - Why does it need _ ?

回答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.

回答2:

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

回答3:

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.

回答4:

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 _test.scss the outcome of the command will be

/scss
 style.scss
 _list.scss
/css
 style.css
 style.css.map
 test.css
 test.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.