SASS on Windows Tutorial – Automatic SASS Compilation

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

app-views-productions.html ArgumentError Error 3214I 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

Koala SASSAfter 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).

Bob McKay

About Bob McKay

Bob McKay is the Managing Director of Fresh Mango BVI & UK, programmer and a self confessed techie-geek type.

Disclosure Policy

Bob on Google+

7 comments on «SASS on Windows Tutorial – Automatic SASS Compilation»

  1. Thanx, Bob. I am trying to put all the bits and pieces together with webdesign workflow. I became very excited by the SASS functionality but was wondering if Koala would be of any use. Your article has put the dots above ‘i’s. Now, I am going to use Koala with the Dreamweaver CC.

    1. Bob McKay says:

      Hey Andre, thanks for the comment, I’m glad it helped!

  2. Szafran says:

    Bob I have question. In Koala we can generate compas sprites?

  3. Aaron says:

    Thanks for this Bob, big help, just started down this route and was starting to lose hope of finding a good compiler. Like you, definitely shocked at the lack of support in Dreamweaver. Think if I didn’t use all the other programs so much I’d of cancelled my subs and switched to something like Sublime Text.

    1. Bob McKay says:

      Hey Aaron,
      I know right? I’m slowly using Sublime more and more to be honest because I’m finding Dreamweaver’s performance abysmal on anything vaguely complex (even in code editor view). Page opens are measured in tens of seconds and this is on a system with Quad Core i7, 16GB RAM and an SSD drive – it should be flying!
      Thanks for posting and good luck with SASS!

  4. Teodor says:

    Hi.
    The problem is more about Koala not auto-refreshing its project entries when I create a new scss file in the project/IDE. You shouldn’t have to press Refresh in Koala in the first place, ever.
    This was the deal breaker to use Koala. Just once you forget to refresh manually in Koala view when creating new files, and you are well on the road to completely negate the effectiveness gains of using scss if you begin chasing why something is not working as expected because Koala wouldn’t know you added the new files.
    I found no other good GUI/easy watcher/compiler for Windows.

Leave a Reply

Your email address will not be published. Required fields are marked *