Sass:Making Underscore File Names Actually Create CSS Files

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

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.

What does an underscore at the start of an *.scss file name indicate?

The only reason I can find to use underscore before the name of the partial is what's described in the Sass docs here:

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.

Any SASS files not beginning with an underscore will be rendered on their own, which will fail if they are using variables or mixins defined elsewhere.

In the end I have concluded that the underscore is just used to clarify that it is a partial file. We can also use a partial file without using an underscore as prefix.

Underscore in partial Sass file

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.

How i can use scss with Underscore theme

You have to use a preprocessor to compile scss to css. The theme uses css, this will not change. You do your changes in scss - then scss compiles to css. A preprocessor can be part of your IDE, you can use programs like Koala, Scout, Prepros or you use the sass command line.

You should start reading here:
http://sass-lang.com

Try compiling your first .scss files in a test directory with help of http://sass-lang.com/guide:

sass input.scss output.css

Then start tweaking _s.

Webstorm 6 - How to make the scss file watcher ignore files

Start by adding a _ to a file that you want to be ignored... Done! From the documentation:

Partials

If you have a SCSS or Sass file that you want to import but don’t want
to compile to a CSS file, you can add an underscore to the beginning
of the filename. This will tell Sass not to compile it to a normal CSS
file. You can then import these files without using the underscore.

For example, you might have _colors.scss. Then no _colors.css file
would be created, and you can do

@import "colors";

So adding an underscore will do the job. Just don't import.

Be careful naming your files because if you have a style.scss and _style.scss Sass will see these as the same filename and trow an error:

>>> Change detected to: /Users/allcaps/test/style.scss
WARNING: In /Users/allcaps/test:
  There are multiple files that match the name "style.scss":
    _style.scss
    style.scss

A simple workaround will be to add two underscores: __style.scss.

---

Related Topics