SASS on Windows Tutorial – Automatic SASS Compilation

So I recently forced myself to start using an enhanced CSS language – I opted for SASS (over LESS) as it just seems to be better supported by the frameworks and systems I want to use.

What is SASS?

I found finding a good straight forward explanation of what SASS was difficult in the the early days of its release so here’s mine: SASS is essentially a form of CSS that allows some coding within it, much like HTML can have PHP code within it.  SASS is then ‘compiled’ in to a standard CSS file before you use it in your project (unlike PHP which is compiled ‘on the fly’ when a page is requested by a user).

As well as the use of things like variables for storing common colours or sizes, SASS also allows you to create ‘mix-ins’ which are essentially like an array that stores a set of styles that can then be applied to other CSS definitions with a single line.

Great – What Next?

Choosing SASS was the relatively easy part, next I had to find a way to make it as easy to work with SASS in my web projects as plain old CSS – that meant finding a good windows based compiler that automatically created a CSS file whenever I updated the SASS file.

What NOT To Try on Windows

I did a fair bit of reading and saw lots of good things written about Scout (see http://mhs.github.io/scout-app/) as well as it being right up there when I did a Google search, unfortunately this simply didn’t work for me on either my Windows 7 x64 or Windows 8 x64 systems – I kept getting the error:

[app:/views/productions.html][] ArgumentError: Error #3214

I would put this down to just bad luck and say try it anyway but lots of others reported the same problem and looking at the project’s page on GitHub shows it hasn’t been updated in over two years, making it a big no for me.

Enter The Koala

After a bit more searching and ready, I came across Koala (http://koala-app.com/) and decided to give it a go. Koala installed quickly and error-free on my machine but having never used SASS before I needed a way to test it and begin learning so I did the following:

1) I created a SCSS file in Dreamweaver (test.scss) and entered the following in it:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}
#tester {
font-family:Verdana, Geneva, sans-serif;
color: $primary-color;
}

2) In Koala I hit the plus (+) symbol to add a new project and selected the folder within my Dreamweaver project that contained the SCSS file. I would not recommend selecting the entire project folder because Koala needs to track this folder for changes so a project with hundreds of files may cause performance issues.

3) I hit refresh in Koala, selected the newly created SCSS file and hit compile.

4) I returned to Dreamweaver and hit refresh on my project and I now have a new CSS file with a corresponding name (test.css)

5) As Koala should now be monitoring the designated folder for changes to SCSS files, I make some changes to the file in Dreamweaver and check the CSS file again – low and behold, its been automatically recompiled. This means I should now be able to edit SCSS and have compiled CSS ready to upload with a click!

The only downside of this process is Dreamweaver doesn’t detect the change to the CSS file immediately and refresh it’s code view – just another failing (I’m stunned that Dreamweaver CC doesn’t have native SASS and LESS compiling, that’s the only thing that would prompt me to sign up for it).