Everybody likes to save time and automate boring and tedious tasks. That’s why I couldn’t be happier, when I discovered CSS pre-processors – Sass and LESS.
However those can be a bit overwhelming and hard to implement in your workflow, when you’re starting with them. There are numerous tools (both free and commercial) that do the hard work of compiling your Sass/LESS creations into web-readable CSS, but I’ll be focusing on particular one, which is free, open-source and beginner-friendly.
Koala App
Koala App provides GUI (graphical user interface) for automatic compiling of LESS, Sass, Compass and CoffeeScript. It’s also multiplatform as it gets, with clients for Windows, Mac and Linux. And all that with a furry mascot :)
Getting started
Once you download, install and launch Koala (no pun intended), all you need to do is drag’n’drop your project folder to Koala. New “Koala project” will be created and your project’s file structure scanned for compatible (“compilable”) files.
Then you’re free to manage manipulation with these files:
- enable/disable automatic file compilation when a change is detected
- specify the output file’s destination (when you want to keep your Sass/LESS and CSS separate)
- automatic CSS prefixing (you know:
-webkit-,-moz-and others?) - enable file minification (and “uglyfication”) – in other words: choosing whether the output should be rather human readable or really small in file size
- and many more..
All the file options are obviously specific to concrete language that you’re trying to compile. Go ahead and experiment with those options so you get the best that works for you.
Another nice Koala’s feature is Error notification. Imagine the scenario when you’re happily coding, but your code won’t compile, because it’s not valid. Ouch, good luck finding what’s wrong. Luckily, Koala pops up a notification window that [this] on line ## went wrong. It’s a helpul feature, even if you just leave out bracket or semicolon.
Project specific settings
Everything so far was app-specific. That means it all happened in your app, on your computer. What if you work from multiple devices? Or when you are collaborating with someone?
That’s when Project settings comes in handy. It’s a small file, that can be generated right from Koala app (right-click on your Project) and which contains global configuration for your project. Keep it in your project’s root folder and anytime anyone imports that Project (~ folder) into Koala, these global settings will be used and everybody will be “on the same page”.
Alternatives
As I mentioned, Koala certainly isn’t the only app in the field. There is Prepros (freemium, $29), super-advanced and ultra customizable Grunt.js “the JavaScript Task Runner” (free, open-source), which is insanely powerful, but not that easy as Koala or Prepros.
Whatever tool you’re choose it’s up to you. The important thing is that you want to save time and do that effectively.