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