sasswatch

Sass --watch in particular order

In textmate, my .scss files are in alphabetical order. I compile them into .css files.

sass --watch css/sass:css/compiled

I'm getting errors though because I need my variables, mixins and resets to be compiled first, followed by the rest of the files.

How can I set the order in which the files get compiled?

Solution

  • You probably have file structure like this:

    css/sass/main.scss
css/sass/mixins.scss
css/sass/print.scss
css/sass/reset.scss
css/sass/variables.scss

    Those files are called partials. Another thing you need to do is add _ (underscore) before each filename, like this:

    css/sass/_main.scss
css/sass/_mixins.scss
css/sass/_print.scss
css/sass/_reset.scss
css/sass/_variables.scss

    This will tell Sass not to compile those files to separate .css files.

    Now you want to compile them into single file. Create new file, style.scss (without underscore) here:

    css/sass/style.scss

    Open it and put your partial files in desired order there:

    @import "variables";
@import "mixins";
@import "reset";
@import "main";
@import "print";

    Note that underscore at the beggining of file don't have to be in the definition, Sass will handle it for you.

    Now you can run 

    sass --watch css/sass:css/compiled

    and Sass will compile content of all partial files into one single file located in

    css/compiled/style.css