LESS CSS – Beginner’s Guide

CSS Pre-processor has now become a staple in web development. It ships plain CSS with programming traits such as Variables, Functions or Mixin, and Operation which allow web developers to build modular, scalable, and more manageable CSS styles.

In this post, we are going to look into LESS which has been one of the most popular CSS Pre-processors around, and has also been widely deployed in numerous front-end frameworks like Bootstrap. We will also walk through the basic utilities, tools, and setups to help get you up and running with LESS.

The Compiler

To begin with, we will need to setup a compiler. LESS syntax is non-standard, per W3C specification. The browser would not be able to process and render the output, despite inheriting traits similar to CSS.

Here is a glimpse at LESS code:

@color-base: #2d5e8b;
.class1 {
	background-color: @color-base;
	.class2 {
		background-color: #fff;
		color: @color-base;
	}
}

The compiler will process the code and turn LESS syntax into browser-compliant CSS format:

.class1 {
	background-color: #2d5e8b;
}
.class1 .class2 {
	background-color: #fff;
	color: #2d5e8b;
}

There are a number of tools for compiling CSS:

Using JavaScript

LESS comes with a less.js file which is really easy to deploy in your website. Create a stylesheet with .less extension and link it in your document using the rel="stylesheet/less" attribute.

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

You can obtain the JS file here, download it through Bower package manager, else directly link to CDN, like so:

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

You are all set and can compose styles within the .less. The LESS syntax will be compiled on the fly as the page loads. Keep in mind that using JavaScript is discouraged at the production stage as it will badly affect the website performance.

You should always compile the LESS syntax beforehand and only serve regular CSS instead. You can use Terminal, a Task Runner like Grunt or Gulp, or a graphical application to do so.

Using CLI

LESS provides a native command line interface (CLI), lessc, which handles several tasks beyond just compiling the LESS syntax. Using the CLI we can lint the codes, compress the files, and create a source map. The command is based on Node.js that effectively allows the command to work across Windows, OS X, and Linux.

Make sure that Node.js has been installed (otherwise grab the installer here), then install LESS CLI through NPM (Node Package Manager) using the following command line.

npm install -g less

Now you have the lessc command at your disposal to compile LESS into CSS:

lessc style.less style.css

Using Task Runner

Task runner is a tool that automates development tasks and workflows. Rather than run the lessc command every time we would like to compile our codes, we can setup install a task runner, and set it to watch changes within our LESS files, and immediately compile LESS into CSS.

Two popular tools in this category today are Grunt and Gulp. We have a series of post that cover these tools. Check ou the posts to learn how to deploy these tools in your workflow.

Using Graphical Application

For those who might not be accustomed to using Terminal and command lines, they can opt for a graphical interface instead. There are an abundance of applications to compile LESS today for all platforms – some free, some paid

Here is the complete list:

App Platform Cost
Mixture OS X / Windows Free
Koala OS X / Windows / Linux Free
Prepros OS X / Windows Freemium (USD29)
WinLESS Windows Free
CodeKit OS X USD32

Which compiler you opt for (aside from JavaScript) does not really matter, frankly, so long as the tool works and complements your workflow, go for it.

The Code Editor

You can use any code editor. Simply install a plugin or an extension to highlight LESS syntax with proper colors, a feature which is now available for almost all code editors and IDEs including SublimeText, Notepad++, VisualStudio, TextMate, and Eclipse to name a few.

Now that we have the compiler and the code editor all set, we can start writing CSS styles with LESS syntax.

LESS Syntax

Unlike regular CSS as we know it, LESS works much more like a programming language. It’s dynamic, so expect to find some terminologies like Variables, Operation and Scope along the way.

Variables

First of all, let’s take a look at the Variables.

If you’ve been working quite awhile with CSS, you probably have written something like this, where we have repetitive values assigned in declaration blocks in the entire stylesheet.

.class1 {
	background-color: #2d5e8b;
}
.class2 {
	background-color: #fff;
	color: #2d5e8b;
}
.class3 {
	border: 1px solid #2d5e8b;
}

This practice is actually fine – until we find ourselves having to sift through more than a thousand or more similar snippets throughout the stylesheet. This could happen when building a large-scale website. Work will become tedious.

If we are using a CSS pre-procesor like LESS, the instance above would not be a problem – we can use Variables. The variables will allow us to store a constant value that later can be reused in the entire stylesheet.

@color-base: #2d5e8b;

.class1 {
	background-color: @color-base;
}
.class2 {
	background-color: #fff;
	color: @color-base;
}
.class3 {
	border: 1px solid @color-base;
}

In the example above, we store the color #2d5e8b in the @color-base variable. When you want to change the color, we only need to change the value in this variable.

Aside from color, you can also put other values in the variables like for example:

@font-family: Georgia
@dot-border: dotted
@transition: linear
@opacity: 0.5

Mixins

In LESS, we can use Mixins to reuse whole declarations in a CSS rule set in another rule set. Here is an example:

.gradients {
	background: #eaeaea; 
	background: linear-gradient(top, #eaeaea, #cccccc);
	background: -o-linear-gradient(top, #eaeaea, #cccccc); 
	background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
	background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
	background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
}

In the above snippet, we have preset a default gradient color inside the .gradients class. Whenever we want to add the gradients we simply insert the .gradients this way:

div {
	.gradients;
	border: 1px solid #555;
	border-radius: 3px;
}

The .box will inherit all the declaration block inside the .gradients. So, the CSS rule above is equal to the following plain CSS:

div {
	background: #eaeaea; 
	background: linear-gradient(top, #eaeaea, #cccccc);
	background: -o-linear-gradient(top, #eaeaea, #cccccc); 
	background: -ms-linear-gradient(top, #eaeaea, #cccccc); 
	background: -moz-linear-gradient(top, #eaeaea, #cccccc); 
	background: -webkit-linear-gradient(top, #eaeaea, #cccccc); 
	border: 1px solid #555;
	border-radius: 3px;
}

Furthermore, if you are using CSS3 a lot in your website, you can use LESS Elements to make your job much easier. LESS Elements is a collection of common CSS3 Mixins that we may use often in stylesheets, such as border-radius, gradients, drop-shadow and so on.

To use LESS Elements, simply add the @import rule in your LESS stylesheet, but don’t forget to download it first and add it into your working directory.

@import "elements.less";

We can now reuse all the classes provided from the elements.less, for example, to add 3px border radius to a div, we can write:

div {
	.rounded(3px);
}

For further usage, please refer to the official documentation.

Nested Rules

When you write styles in plain CSS, you may also have come through these typical code structures.

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
}
nav li {
	width: 600px;
	height: 40px;
}
nav li a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

In plain CSS, we select child elements by first targeting the parent in every rule set, which is considerably redundant if we follow the “best practices” principle.

In LESS CSS, we can simplify the rule sets by nesting the child elements inside the parents, as follows;

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	border-bottom: 2px solid #283744;
	li {
		width: 600px;
		height: 40px;
		a {
			color: #fff;
			line-height: 40px;
			text-shadow: 1px 1px 0px #283744;
		}
	}
}

You can also assign pseudo-classes, like :hover, to the selector using the ampersand (&) symbol.

Let’s say we want to add :hover to the anchor tag above, we can write it this way:

a {
	color: #fff;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
	&:hover {
		background-color: #000;
		color: #fff;
	}
}

Operation

We can also perform operations in LESS, such as addition, subtraction, multiplication and division to numbers, colors and variables in the stylesheet.

Let’s say we want element B to be two times higher than element A. In that case, we can write it this way:

@height: 100px

.element-A {
	height: @height;	
}
.element-B {
	height: @height * 2;
}

As you can see above, we first store the value in the @height variable, then assign the value to element A.

In element B, rather than calculate the height ourselves, we can multiply the height by 2 using the asterisk operator (*). Now, whenever we change the value in the @height variable, element B will always have twice the height.

Check out more advanced operation examples in our previous tutorial: Designing A Slick Menu Navigation Bar.

Scope

LESS applies the Scope concept, where variables will be inherited first from the local scope, and when it is not available locally, it will search through a wider scope.

header {
	@color: black;
	background-color: @color;
	nav {
  		@color: blue;
			background-color: @color;
  		a {
				color: @color;
  		}
	}
}

In the example above, the header has a black background color, but nav‘s background color will be blue as it has the @color variable in its local scope, while the a will also have blue that is inherited from its nearer parent, nav.

Final Thought

Ultimately, we hope this post can give you a basic understanding on how we can write CSS in a better way using LESS. You maybe feel a little awkward at first, but as you try it more often, it will surely become a lot easier.

Here are a couple of tutorials that I encourage you to look into for further tips and practices, which can help push your LESS skill up to the next level.