Less CSS pre processor

Less is more!

LESS is a CSS pre-processor, or CSS extension language, that allows you to write more intelligent CSS by including variables, mixins, functions and nested CSS rules.

Before the days of LESS, writing CSS could become quite laborious.  CSS is a very verbose language and you find yourself repeating the same selectors over and again with the structure often messy and difficult to maintain as sites get bigger and more complex.  This is why people jumped at the opportunity at using either LESS or SASS to write their CSS!

Consider this crude example:

.main_navigation {
	padding: 0;
	margin: 0;
}

.main_navigation li {
	padding: 0;
	margin: 0;
	display: block;
	float: left;
}

.main_navigation li a {
	display: block;
	padding: 10px;
	color: #000;
}

.main_navigation li a:hover {
	color: #ddd;
	text-decoration: none;
}

How many times do you find yourself repeating rules like the above?  Project after project, you'll ask yourself if there is a better way, particlarly when you start adding more complex rules including vendor prefixes for rounded corners or box shadows.

The example can be re-written as follows in LESS:

@primary: #000;

.main_navigation {
	padding: 0;
	margin: 0;

	li:extend(.main_navigation) {
		display: block;
		float: left;

		a {
			display: block;
			padding: 10px;
			color: @primary;

			&:hover {
				color: lighten(@primary, 20%);
				text-decoration: none;
			}
		}
	}
}

So much better...

SASS is very similar to LESS – both extend the CSS language extensively allowing logic to be applied to your stylesheets resulting in better managed CSS and web projects.  The main difference between LESS and SASS is that the latter is coded in Ruby and the former in Javascript.  Often people would offer this as the main reason to choose either SASS or LESS; SASS, being Ruby, is processed server-side while LESS, being Javascript, is processed client-side.

Developers would often prefer pre-processing to be performed server-side rather than potentially adding another client-side load to websites.

If this were solely the case, I think SASS would be a sensible choice on this argument alone, but it seems people use SASS and LESS more during the development process than in the live environment.

I use LESS because it’s a Javascript library and, for me, this feels more like home.  I don’t compile LESS client-side, I compile as I’m developing using third party plugins for both Visual Studio and Sublime Text.  This allows me to create LESS libraries containing all of my variables and mixins and import them into my main LESS files as I’m going along.  This makes CSS for any given project more easily managed and the resulting output can be deployed to the live site with the LESS files remaining in their respective libraries.

Due to this workflow process, choosing between LESS and SASS became more a choice of personal preference with LESS winning due to its Javascript roots.

Variables

Declaring variables in LESS is simple:

@blue: #093684;

Variables in LESS are lazy loaded so a variable declared at line 500 can still be used at line 100, if so desired.

The variable can then be used like so:

.box {
    background: @blue;
}

/* Would output to */

.box {
    background: #093684;
}

The obvious advantage here is that this variable can be re-used over and over, so for extensive themes, your CSS only ever needs to be edited at one location.

Mixins

Mixins are incredibly useful in LESS.  The ability to create re-usable CSS rules in scenarios where you find yourself continually repeating vendor prefixes - this is really where I started searching for an alternative solution.

A simple example would be like this:

.box-sizing(@properties) {
	-webkit-box-sizing: @properties;
	-moz-box-sizing: @properties;
	-o-box-sizing: @properties;
	box-sizing: @properties;
}

.box {
	width: 100%;
	padding: 25px;
	.box-sizing(border-box);
}

/* Would output to */

.box{
	width:100%;
	padding:25px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box
}

You can also declare parametric mixins such as the example below.  I've also thrown in some math to cater for scenarios where you have to deal with differences in implementation such as IE filters.

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

.opaque_thing {
	.opacity(0.8);
}

/* Would output to */

.opaque_thing{
	filter:alpha(opacity=80);
	opacity:.8
}

Nested rules and concatenation

Writing LESS in a nested format makes your CSS much more manageable, readable and more enjoyable to write with CSS written in blocks based on their parent element.  The example at the beginning of this post makes good use of nested rules.

Concatenation in LESS is fantastic and allows you to easily create rules such as the below:

.button {
	display: inline-block;
	padding: 10px 15px;
	color: #fff;
	background: red;

	&.blue {
		background: blue;
	}
}

/* Would output to */

.button{
	display:inline-block;
	padding:10px 15px;
	color:#fff;
	background:#f00
}

.button.blue{
	background:#00f
}

The above example will create a rule for the class .button using standard properties and then further extend those properties for elements also using the class .blue. 

The same can be applied to pseudo element such as hover, nth-child, last-child and so on such as below:

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;

	li {
		margin: 0 5px 0 0;
		padding: 0;

		&:last-child {
			margin-right: 0;
		}
	}
}

/* Would output to */

ul {
	margin:0;
	padding:0;
	list-style-type:none
}

ul li {
	margin:0 5px 0 0;
	padding:0
}

ul li:last-child {
	margin-right:0
}

Colour operations 

There are a whole array of functions and operations that can be used in LESS. I find a common one I use is the ability to lighten, darken, de-saturate, saturate or apply mathematics to colour values.  This is particularly helpful when creating hover states or to provide contrast between background colours and the elements on top.

 
 
 

The palette above can be easily achieved using the following:

@blue: #093684;

.box {
	height: 50px;

	&.blue {
		background: @blue;
	}

	&.lightblue {
		background: lighten(@blue, 15%);
	}

	&.lighterblue {
		background: lighten(@blue, 25%);
	}
}

/* Would output to */

.box {
	height:50px
}

.box.blue {
	background:#093684
}

.box.lightblue {
	background:#0e53cc
}

.box.lighterblue {
	background:#1d6af0
}

LESS also does a good job of cleaning your CSS as any unused rules with no properties specified will not be outputted.  Comments will also be removed.  (Javascript syntax comments can be used in LESS too, so instead of the normal block-style /* comment */, you can use // comment) 

The examples provided only really touch the surface of the capabilities of LESS and what it can do for your workflow.  Once you have adopted a CSS pre-processor, you’ll find yourself using it religiously, and more in-depth for each new project.

More information can be found by following the below links:

LESS: lesscss.org

SASS: sass-lang.com

Leave a comment