Less is a CSS pre-processor which helps you develop, extend and maintain complex CSS.

I now use Less by default when starting a new project, as it promotes simplicity and reuse, two things that can often be lost when building complex, response web applications.

One of the great things about Less, is that it is easy to pick-up for anyone that has experience with CSS. This is because Less uses standard CSS syntax, making it backwards compatible and easy to extend.

What actually is a CSS pre-processor?

A CSS pre-processor enables a developer to write CSS in a programming construct instead of static rules. For example, Less supports variables, nesting, mixins, operators and functions. These mechanisms allow the developer to manage CSS as if it were application logic, making it more maintainable, themable and extendable.

A very simple example, would be the use of variables:

@green: #006600;
@light-green: @green + #111;

#header {
color: @light-green;
}


In this example, you can see the variables green and light-green were declared and then made available for reuse. Simple, but powerful when compared to CSS static rules.

Automating Less with Grunt?

One of the (minor) downsides to any CSS pre-processor is that they must be compiled into CSS. To get the most out of Less, I recommend setting-up some simple automation, which essentially removes the compilation pain.

To do this I use Grunt, which is a JavaScript Task Runner. Grunt enables you to automate repetitive tasks like compilation, magnification, unit testing, etc. The other great thing about Grunt, is that it has an incredible ecosystem of plugins, making it very easy to get started. My personal favourite plugins are:

grunt-contrib-clean - Cleans Files and Folders
grunt-contrib-concat - Concatenate Files
grunt-contrib-copy - Copy Files and Folders
grunt-contrib-less - Compile Less to CSS
grunt-contrib-uglify - Minify Files with UglifyJS
grunt-contrib-watch - Watch Files and Run Predefined Tasks

When working with Less, I use Grunt to watch my Less files and automatically compile any changes. As a result, any changes are instantly available within my application, which helps to streamline the development process.

Once I hit a logical milestone, I use Grunt to minify the output into optimised production ready code.

Getting Started

Getting started couldn’t be easier, simply head over to the Less and Grunt websites and follow their excellent installation and configuration guides.

development programming less grunt