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.