45

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.

Squrler
  • 3,444
  • 8
  • 41
  • 62

1 Answers1

57

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.

Colin Bacon
  • 15,436
  • 7
  • 52
  • 72
  • 12
    If you import a Sass file without a prepended underscore into another Sass file, that also is without a prepended underscore, then only one CSS file will be generated, so the claim `Partials must start with an underscore if you do not want them to be generated into a css file.` isn't really true - I can have partials that will not start with an underscore that would also not be generated into a CSS file. It depends on how you send your files to your compiler, right? – ESR Dec 30 '17 at 11:42