Underscore in partial Sass file

Question

Is it necessary to have a .scss partial file start with an underscore? The documentation states that a partial should start with an underscore, because the file would otherwise compile to a CSS file.

However I've noticed gulp-sass compiles files without an underscore into one complete CSS file just fine.

Answer 1

1. Partials must start with an underscore if you do not want them to be generated into a css file.

2. A scss file can import another file without an underscore and still compile correctly.

Take this example:

sass
    +-- base
    |   +-- _normalize.scss 
    +-- components  
    |   +-- site-header.scss
    +-- utilities       
    |   +-- _icons.scss
    +-- site.scss

Here we can see that site-header.scss and site.scss do not have underscores. If I ran a gulp task to compile anything within the sass folder, two files would be output.

site-header.css
site.css

We do not want to generate site-header.css but because we have omitted the underscore the compiler only ignores files with an underscore and generates a css file for it.

site-header.scss can still be referenced in site.scss with an @import

@import 'components\site-header';

This will result in the same outcome whether it is prefixed with an underscore or not.