• Why This Man Is Risking Jail by Refusing to Surrender Passwords at a London Airport [Updated] https://t.co/UxDkta5BqX via @gizmodo

Koala: GUI Sass/LESS compiler

Koala is free and open-source GUI app for compiling LESS, Sass, Compass and CoffeeScript.

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 features

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 :)

Download Koala

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. Staying on the topic, which tools do you use to minimize the boring routines in your workflow? Share with us in the comments below!

(Visited 2,420 times, 67 visits today)

About Author

Follow on
Martin Allien

Graphic & Web Design freelancer from Prague. Loving opensource not because it's free, but 'cos it's open. Fighter for privacy, anonymity and freedom.
Say hi @AllienWorks

2 Comments

Please leave out insults, spamming and other unpleasant activities.
Thanks for your feedback!

  1. Hi Good morning,

    I want to work in koala GUI but i dont know how to structure my project so, kindly help me in this regards,

    Waiting for your reply.

    Regards,

    1. Hey Azhar! How you’ll structure your projects is completely up to you. If you’re not sure, start with default options (where compiled files will be in the same folders as original Sass/LESS files). Some devs prefer having their Sass/LESS separated in different folders (e.g. Sass files in “sass/” folder and compiled CSS in “css/”) – but as I said, it’s completely up to you and your workflow. Good luck!

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>