The awesomeness behind LESS

If you have never heard of LESS before, let me introduce you it. LESS is a preprocessor for CSS; basically it is a dynamic language, which helps you write CSS more efficiently.

You can also think of it as an addition to CSS because it adds in new behaviors such as variables and mixins which are the driving forces that make writing CSS through less that much simpler and therefore better.

Why you ought to use it

I wouldn’t be writing about LESS if it did not have plenty of advantages. It’s two biggest selling points, if you will, are that it makes CSS programming easier and faster. Let’s explore those two thoughts a little big more.

Easier and Faster

CSS is fairly simple to begin with because it doesn’t require a lot of logic; it just has a bunch of rule to define. However, defining those rules can become tricky and tedious at times. You then run into numerous limitations and obstacles that make your life much harder – and there, right there, is not nice. LESS’ features such as variables and functions help you get the hold of your CSS with ease just like they do in other languages such as JavaScript.

For instance, having variables helps with extensive style sheets where replacing a single hex colour with another could take hours as it is all over the place. When you have a variable in place, you then change the hex for the variable and the value is adjusted automatically for you. And that takes only a few seconds in comparison. You can only images how efficiency and easy of use will then lead to faster development time.

Similarity in syntax

One other thing that makes LESS great is its similarity in syntax to CSS. This will be especially helpful to people who are new to CSS or have a hard time grasping other language syntax. I think something this obvious is amazing – why create a new syntax for something that is supposed to be a helpful add-on, right? It also means that once LESS is installed, you are ready to go because there is no need to figure out how it works – as long as you know CSS, you know LESS too.

Installing this bad boy

Before I explain the installation process for you, I need you to understand something. LESS runs on both the client side and server side. The difference between the two is that on a client-side, the code is run at a user’s computer – like a typical style sheet does. On the server-side, the code runs on the web server first, and then enters a user’s computer all nice and prepared. All this means is that there are two ways to install LESS.

Client-side

If you’ve ever linked a style sheet, you are already familiar with how to make LESS work through a client-side method. However, this is a bit more complicated then just linking a CSS style sheet. Let me explain.

First, you need to make sure that all of your LESS files are saved as .less, like so: example.less. It is just like a CSS file but with .less not .css.

styles.css

Link the LESS file like you typically would a CSS file. Now, in the link make sure you specify the relation to be “stylesheet/less.”

<link rel="stylesheet/less" type="text/css" href="styles.css" />	

When you download LESS form their website, you are given a JavaScript file. It is the file tht makes less work, actually. It is crucial that you also include it in your HTML file like any other JavaScript file

<script src="less.js" type="text/javascript"></script>

It is super important that the LESS stylesheets come before the JavaScript files. And that is it; your client-side LESS installation is ready to go.

Server-side

First, to install LESS on your server you’ll need to use the node package manager – npm.

$npm install –g less

Now, you can call the compiler.

$ lessc styles.less styles.css

And you’re all done.

If you know your way around server-side scripting, you should go with this method as it poses so many more advantages, and at the end of the day seems to be an easer way to handle LESS.

The best of LESS

I’ve been preaching all along this post that the features that LESS offers are amazing; like. I think it is only fair to go over some of them and explain what makes these features simply great.

Variables

Variables are a godsend when it comes to any CSS preprocessor actually and will be the number one thing you will use and fall in love with LESS for. I promise you that.

A variable always starts with @ symbol, it is what tells LESS that the following is in fact a variable. Without it, it just simply is text. So, don’t you ever forget the @ symbol. The variable name itself can be made up of letters, numbers, dashes, underscores and hyphens. The variable value can be either a number or a string.

Let’s set up some variables then.

@primary-colour: #262626
@secondary-colour: #f0f0f0
@text-font: “Times New Roman”

And include them in some rules.

a{
	color: @primary-color;
	font-family: @text-font;
}
a:hover{
	color: @secondary-color;
}

Below, you can see what the complied CSS of the LESS code will be.

a{
	color: #262626;
	font-family: “Times New Roman”;
}
a:hover{
	color: #f0f0f0;
}

Out of all LESS has to offer variables are the easiest to comprehend and most valuable too.

Mixins

You can think of mixins as variables but whole a whole class. Basically, you define a bunch of properties to form one rule, like you would a class, but then you can use this new mixing within another class. Let me show you an example.

.borders{
	border-top: 1px solid blue;
	border-right 2px solid red;
	border-bottom: 3px solid yellow;
	border-left: 4px solid green;
}

Above we have a simple border class that includes various border styles. Below we will add this class into another class – something you cannot do within CSS.

#box{
	width: 100px;
	height 100xps;
	.borders
}

CSS will compile the following code:

.borders{
	border-top: 1px solid blue;
	border-right 2px solid red;
	border-bottom: 3px solid yellow;
	border-left: 4px solid green;
}
#box{
	width: 100px;
	height 100xps;
	border-top: 1px solid blue;
	border-right 2px solid red;
	border-bottom: 3px solid yellow;
	border-left: 4px solid green;
}

And that right there is how a simple mixin works. If you want to get more complicated you can pass arguments within mixins but that is some fancy and a bit more advanced stuff for this post.

Nesting

The third most notable aspect of LESS is its nesting capabilities. In CSS, you are required to write out each rule separately, which can get pretty gruesome when you want to target something specific that is deep down within a bunch of other tags. Below you’ll find a pretty common example.

#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul p {}
#header #nav ul p a {}
#header #nav ul p a: hover {}

I’m sure you know how unruly these can get. But, with LESS things get much simpler. Nesting refers to setting rules inside of rules which changes the structure of the code to look more a like of a HTML hierarchy actually. You nest rules within rules to set the hierarchy of the intended CSS and you don’t have to repeat yourself over and over again either.

Below is the above example re written.

#header {
	#nav {
		ul {
			li {
				a {
					&:hover {}
				}
			}
		}
	}
}

I hope that the picture is very clear to you about how nesting works. One thing you might be wondering is the way hover is introduced as it is”&:hover{}” When it comes to pseudo-classes thing work a little bit differently. To include a pseudo-class you simple place a & symbol before the pseudo-class, like in the example above.

So, now what?

I hope that this post was a great introductory tutorial for LESS. There is so much more to it then that; I just wanted to make sure you understood why LESS is amazing and highlight its most prominent features. I hope that now you understand why preprocessors are great, especially LESS and that you’ll install it and love using it in your next project.

• TAGS:
• CSS
• LESS
• Tips
• Tools