DevDm – Danny Machal

Web Developer, Programmer and Android User

If you are using Twitter Bootstrap you will use LESS if you want to pump out some quick color templates for your designs. In the world of CSS pre-processing there is LESS and SASS at the top. I’ve not dove into any of the SASS stuff but LESS was in front of me so that is what we will focus on.

What is CSS Pre-Processing?

LESS is for all intents and purposes a CSS programming language. There are variables, mix-ins, functions and all sorts of basic expression operators to speed up your CSS creation process. However, when you create these .less files they are not readable by any of the layout engines (WebKit, Trident, Gecko, Presto). The .less files must be fed into a compiler to generate a CSS file to use on the web.  You can use less.js (or many of the other emerging “on the fly” generators) but your website will suffer in speed for something you only had to do once locally.  Compiling the .less into CSS locally is STILL the way to go.

What programs are available to help me compile my .less files into CSS?

What to choose? Short Answer:  WinLESS if you are working with Bootstrap’s files. Crunch! if you ARE NOT working with Bootstrap’s LESS.

Long Answer: I tried out a few so lets just go down the list.

Crunch!

Crunch! Is a LESS editor and compiler in one. This is probably the number one option for MOST people getting into LESS.  It provides a nice interface and is built with Adobe Air. The only reason I’m not using it is that the current v1.5 doesn’t compile Bootstrap’s 2.3.1 LESS files. It throws an error every time. V1.6 fixes this problem and is being worked on in GitHub but I’m still kind of a boob about using GitHub so maybe you are able to download a new compiled version to install but it isn’t officially released as of writing this post.  Once v1.6 comes out this will be what I will use.

Koala

Koala is just a compiler with no built in editor. The cool thing about Koala is that it isn’t limited to just LESS files. It has the capability to compile SASS and CoffeeScript as well. For some reason Koala was VERY slow on my system. It took forever to start but seemed okay once it was started.

SimpLESS

SimpLESS’s redeeming quality is the ability to use Prefixr on the compiled CSS files.  Prefixr is cool because it automatically generates cross browser CSS. I use the Prefix plugin for Notepad++ to do accomplish this but there are JS files available to do it on the fly.  SimpLESS will read your LESS files -> compile them -> Run Prefixr -> Minify the outputted CSS files.

WinLESS

My favorite! WinLESS has won me over until Crunch! is updated. WinLESS allows you to select the files you want to compile and it does so ON THE FLY when the file is changed. It runs in the background and is VERY fast. So my process has become: Open WinLESS -> Load my projects’ LESS file directory -> Open my LESS files with Notepad++ -> Edit as needed. All I have to do is save the .less file and reload the page I’m working on in my browser. The CSS has been already compiled by the time I reload.  WinLESS also Minifys the output. In fact MOST of the LESS compilers will Minify the CSS file.  All Minify means is that all the white space and new lines in your CSS file are removed. The resulting minified file looks like one giant long string instead of a formatted document a human can read easily.

Resources

Leave a Reply

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

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

April 7th, 2013

Posted In: CSS, Javascript, Website Development

DevDmBootstrap created by Danny Machal