The wonders of LESS

by
17 July 2014 0 comments
The wonders of LESS

Have you ever stumbled upon something that literally changes the way you work in five minutes flat?  That's what happened when I started using LESS to pre-compile my CSS.  For ages, it seemed, I was on the look out for something to alleviate the repetitive strain of re-typing the same selectors over and over, the same colours and the same vendor prefixes.

I heard the terms LESS and SASS being thrown about here and there and decided to take a look.  For those who don't know, LESS (and SASS) are CSS pre-compilers or CSS Extension Languages that allow you to apply logic, variables, mixins and functions to your CSS.  It is truly a godsend.

Before the arrival of CSS pre-compilers, it was very easy for your CSS to become long, complex and overly verbose.  This was mainly due to re-typing the same or very similar sections of CSS for different selectors or elements.

After I was introduced to both LESS and SASS, despite most designers actually (it seemed) preferring SASS over LESS (as LESS is community driven), I chose LESS.  This was mainly due to it's Javascript roots as opposed to Ruby with SASS.  Alto of the work I do with my full time job is .NET based, so a Ruby based product didn't really seem to fit.

LESS has allowed me after an easy learning curve (15 mins to get the gist, a day to become very confident) to structure my CSS in a much more logical manner.  In ordinary CSS you found yourself repeating selectors, writing unorganised code and getting bored out of your mind.  LESS hve revived my passion for CSS and has enabled me to think more logically about the structure of my code.

5 Reasons why you should switch to LESS

Variables

The ability to define variables in LESS is one of the reasons why the CSS pre-compiler will increase your productivity and make your code DRY (as in Don't Repeat Yourself).  Any Javascript developer will tell you to cache your selectors and never repeat your code.  The same is with LESS - you can define color variables for one thing which will make switching palettes as easy as replacing one or two variables in your code.

Nested rules

Consider the below code:


	#main_navigation {
		float: right;			

		ul {
			margin: 0;
			padding: 0;

			li {
				margin: 0;
				padding: 0;
				float: left;
				text-align: center;

				a {
					display: block;
					padding: 0 30px;
					line-height: 60px;
					color: #fff;						
				}

				&:hover a, &.active a  {
					background: fade(#fff, 20%);
					text-decoration: none;
				}
			}
		}
	}

There's actually a few more LESS features that I love to take advantage of in the above example, but you can see that nesting your rules makes the code more readable and organised.  You find yourself having fewer heirarchical conflicts and makes the CSS so much quicker to write.

Notice the fade property in the above code?

Functions

A quick example of functions in the built in color function that is available in LESS.  I love this.

Say you have a button that uses a color you have defined as a variable @primary (this color may be orange #f27200).  You can set the button background-color to @primary and on hover darken the color by 4%, giving you nice little rollover effect.


.button {
	background: @primary;	

	&:hover {
		background: darken(@primary, 4%);
	}	
}

You may notice above another benefit of using LESS - concatenation

Concatenation

In LESS, you can concatenate pseudo-elements, classes and ID's using the & symbol!

This means that (in the above code) you can declare a rule for a button (or an anchor) and then use the concatenator to specify the hover declaration in a nested rule!  The same applies for :after, :before, :focus and any other psuedo-elements you normally use.

Using concatenation makes your code easier to write, quicker, more organised and a whole lot more fun.

Mixins

Mixins allow you to specify a bunch of re-usable code snippets that can then be imported into your LESS file (or declared in the file itself).  Normally, you would use mixins for CSS declarations that use a lot of vendor prefixes for example.  This makes managing your vendor prefixes a whole lot easier - you only need to change them in one place now rather than sifting through hundreds (thousands) of lines of code to make any changes.

Mixins can also be parametric which allows you to pass in parameters to define values in CSS rules.

For example:


.opacity(@properties) {
    @ie_opacity: @properties * 100;
    filter: ~"alpha(opacity=@{ie_opacity})";
    opacity: @properties;
}

You can also see the use of mathematical functions above where the parameter I pass in needs to be modified to be compatible with IE filters.

I've completely changed the way I write my CSS.  LESS will improve the way you build your websites.  It will encourage the use of CSS3 and will eliminate compatibility issues across the board.  CSS becomes easier to write so you can spend more time on other aspects of web development ultimately allowing you to produce better work with fewer inconsistencies.

What CSS pre-processor do you use and what are your favourite features?  Sound off below!

← All posts

Leave a comment

Send us a message

Vital Works would love to hear from you. If you have a project in mind or have a general question, then please get in touch.