CSS Authoring: Less is more

Introduction

Ever since CSS was first published many years ago to separate content from presentation its basic structure and "language" features have hardly changed. Tools such as Sass and Less aim to remedy some shortcomings, such as:

1. Variables - often you find yourself declaring the same dimensions or positions within your document (or even across documents), making it more difficult to change them later
2. Inheritance - nested rules require repetition of selectors, adding to the clutter
3. Operators - addition, subtraction and other functions can be helpful to add relationships between definitions

Making a choice

Both are great tools and make it easier for us developers to author CSS. Personally, I have chosen Less for a few reasons:

1. Existing CSS files are already valid Less files; though from 3.0.0 onwards, Sass now also supports this paradigm
2. Mixins don't necessarily have to be declared as such; they can be any #id, .class or element definition and are referenced by just their selector
3. Less stays closer to the CSS format, unlike Sass where conditions and loop structures are supported

Integration into Aptana

After selecting the right tool you will want to integrate this into your editing suite. This is not entirely trivial, so I've put together a guide for Aptana. The guide is geared towards a Windows installation, but should work fine on Linux with some tweaks.

Getting the stuff

You will need the command-line tool for Less, which you can get from their Github site. Download the zip and unpack it in a folder of your choice.

You also need Node.JS, which you can download from their site. Download the node.exe Windows executable and store it wherever you like.

Aptana modifications

First off, make .less files appear as CSS.

1. Go to Window > Preferences > General > Editors > File Associations
2. Click 'Add...'
3. Enter '*.less' and click 'OK'
4. Under 'Associated editors:' click 'Add...'
5. Select 'CSS Source Editor' and click 'OK'

Create a few string substitution variables (optional)

1. Go to Window > Preferences > Run/Debug > String Substitution
2. Click 'New...'
3. Enter the absolute filename of node.exe and name it 'nodejs_path'; click 'OK' when done
4. Repeat the last two steps for the installation path of 'lessc'; Note - because of NodeJS you need to use CYGWIN paths (e.g. /cygdrive/d/less/bin/lessc)

Now we can do the integration:

1. Go to Run > External Tools > External Tools Configurations...
2. Select 'Program' and follow the instructions to create a new configuration
3. Under 'Location:' specify the Node.JS installation path: ${nodejs_path}
4. As 'Working Directory:' set the path to the containing path of the current selection: ${container_loc}
5. For 'Arguments:' use this: ${lessc_path} "{$selected_resource_name}"
6. Open tab 'Common' and look for 'File:'; the value should be: ${selected_resource_loc}.css
7. When everything runs well, you can uncheck 'Allocate Console' here as well

That's it! Once you're done, you can run the tool from the toolbar and it will create a new file in the same folder with a .css extension.