What is LESS?

LESS is a CSS Preprocessor that extends the feature set of CSS. LESS adds to CSS the ability to program within traditionally static front end stylesheets which allows web designers to no longer need to repeat themselves and gives us more dynamic options in how we put our formatting styles on the site.

Getting Started

Anyone that has used CSS before to style a website is in luck, LESS is the same language. The syntax is exactly the same as what you are used to, this means making the jump to LESS is a seamless process. All you have to do is learn some basic new tricks then the rewards just keep on coming. Once you get started you are not going to go back to boring CSS style sheets.

Variables

If you have used any programming language in the past then you already know the beauty of variables. Variables allow you to store a value that can be used throughout the style sheet. A simple example is shown below:

@brand-color : #0F55C4; // mtc. blue

.logo {
color: @brand-color;
}

#footer {
background-color: @brand-color;
}

.button {
border-color: @brand-color;
}

So what happens when the client has changed their brand colour? Search and replace is a thing of the past. You now go to your variable.LESS style sheet and you change that one variable.

Thanks to variables we can now update the whole site quickly instead of replacing the value over many documents and in many places.

Mixins

Mixins allow you to add all the properties of one class in to another class by simply adding the class name as a property. The great thing about mixin classes is that you no longer have to repeat yourself by adding all the browser suffix. You add it once then you call that class when needed. Parameters can be added to these classes to making them highly interchangeable. This is shown well in this next example.

.gradient (@startColor: #2170b5, @endColor: #164b91) {
background-color: @startColor;
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
background: -moz-linear-gradient(top, @startColor, @endColor);
background: -ms-linear-gradient(top, @startColor, @endColor);
background: -o-linear-gradient(top, @startColor, @endColor);
}

The above mixin is used to apply a gradient to any class that requires it. This example has start color of light blue which fades into a darker color of blue. To apply this to the navigation class all I would have to do is:

.nav {
.gradient;
}

Lets say I didn’t want to use those shades of blue because I wanted to add a hover effect on the navigation item, I can do this by adding one simple rule -

.nav a:hover {
.gradient(#135498, #0e3966);
}

What the above example does is change the start and end color variables to the newly applied colours. This is one of the many super powers that LESS has to offer and what makes highly re-useable and easy to maintain.

Just the beginning

The above examples have only scratched the surface of the capabilities of LESS. There are many more such as nested rules, operators, namespaces etc. http://lesscss.org/ is the authors website and features documentation on getting started with LESS in your own development workflow. Part of our reason for choosing LESS as our preprocessor was the sheer number of other resources on the web that you can also use.

LESS is useful because of its minimal learning curve that is so simple that it is easy for any frontend developer to make the change and discover the power of LESS as you use it. LESS makes it easier to maintain the site which cuts down on the time to fix bugs or make amends which speeds up the front end build time of a product and makes it much easier to maintain.