Styling with LESS

Creating a webdesign can be a lot of hard work. Translating your ideas for a beautiful design into HTML and CSS code is time consuming. Bootstrap already reduces the amount of work.

LESS is a language that has been specifically created to make writing CSS less work. And because LESS is CSS (plus some extra’s) you do not really need to learn anything new.

When you visit the Bootstrap project on GitHub you will see a folder called LESS. This folder contains the Bootstrap LESS styling files.  This tutorial will give you the basic knowledge about styling with LESS and help you understand (and customize) the Bootstrap less files.


What is LESS?

LESS is (based on) CSS. It doesn’t replace it but is a superset of CSS. If you are familiar with CSS then LESS:

  • Makes writing CSS easier especially when your style sheets become longer and more complex.
  • Adds extra functionality to CSS.

Because LESS is based on CSS this also means it minimizes your learning curve when you want to learn LESS.

When you decide to learn LESS you invest a bit of time in the beginning and win a lot of time later on. And you can do thing to improve your themes that you could not do with CSS.

So that’s enough for the sales-pitch.

To explain what LESS is and how easy it is to learn the best approach is to show you a few examples.

Example of a LESS variable

To show you how LESS works we first look at a simple bit of CSS. To style a button with CSS we can give a value to the background-color property. And when we set the border of the button we can give it a color value too:

With LESS we take a different approach. We first create a variable. This variable will hold the color value. And then we use the name of that variable to write the styling rules for the button:

In the example above we start by defining the variable “@button-color”. In LESS a variable can always be recognized because the name starts with a “@”. We then store a value inside that variable. In the example above we stored the value “#d24444” in the container.

We can then use the variable name when we write other CSS rules. In this example we use the variable name to set the background color and we use it to create a border color that’s slightly darker (how this is done with percentages etc. is something I’ll explain in another tutorial).

Advantage(s) of LESS variables

The advantage of working with LESS is that we can create variables. We can than set values for CSS properties by using the name of the variable.

If – later on – we want to change a color we only have to change the value for a variable. We do not have to find all the instances in our style sheet where we used that color. Changing the value for a variable results automatically in a change everywhere in the style sheet where we used the name for that variable.

With LESS style sheets it’s good practice to define all the variables at the top of a style sheet. That way if you want to change their values (e.g. use a different color scheme) you only have to look at the top of the style sheet. In Bootstrap the all the variables even have their own file “variables.less”.

Example of a LESS Mixin

With LESS you can use variables but you can also create so-called “mixins”.

With mixins you can embed all the properties of a class into another class. The best way to understand mixins is to look at an example:

With CSS3 we can create rounded corners. To achieve this we use “border-radius”. But to make this work in different browsers we have to write several lines of CSS (one for each browser engine). And each time we want to create a rounded corners effect for another element on a web page we have to write those lines again:

With LESS we create a mixin to take care of this:

The name of a LESS mixin  start with a dot. The rest of the name can be anything you want (that is to say: don’t start with a number, special character). So you can use a name that makes it easy to understand what it will do.

As with LESS variables we first define a mixin and then use the name of the mixin in the rest of our LESS style sheet(s) when we want to create a certain styling effect.

In the example above we first created a mixin with the name “.border-radius”. We then attached several CSS classes to that name. Because we wanted to create a mixin that replaces the CSS property “border-radius” the name “.border-radius” for this mixin is easy to remember. But as said it could be any other name.

We can spice things up a bit by creating a “parametric mixin”.

A parametric mixin contains a parameter instead of a specific value (e.g. 5px). The use of a parameter instead of a constant allows us to use the name of the mixin and adapt its value when necessary.

In the example above we used our “border-radius” mixin again. But this time set a parameter with the name “@radius”. When we use the mixin to create rounded corners for the button we replace that parameter with a constant (5px). But when we want to create rounded corners for another element (with the class “.box”) we set a slightly different value (10px).

We can also set a default value for a parametric mixin:

When we do not add a constant (e.g. for the button) we will get the default value for our rounded corners. And when we want to deviate from this we simple use a constant (e.g. for the .box element).

Advantage(s) of LESS Mixins

The advantage of a LESS mixin is the time we save whenever CSS requires several lines of code to create a certain effect. Obvious examples are CSS3 properties like “border-radius” and gradients. “box-shadow” because of the requirement to use prefixes (to satisfy different browser engines).

Another advantage is the flexibility of a parametric mixin. As you have seen in the examples for parametric mixins we can adapt the value to our needs without having to create another mixin.

LESS is easier and adds functionality

You will probably agree that working with a LESS variable (e.g. @button-color) is easier to remember than trying to remember a hex-value like “#d244444”.

Using LESS also reduces the lines of code you need to write when working with prefixes for a border-radius, a gradient, etc..

LESS adds functionality to CSS because we can use so-called Operations (e.g. make the border 15% darker than the background).

In the next tutorial I will show you 3 methods to process/compile LESS code. The first method provides you with a LESS editor and you can directly see how your LESS code compiles into CSS. Then we’ll look into 2 options that work with browsers. Browsers cannot handle LESS code without a bit of help. We will look into a method that allows you to process LESS code directly in the browser and another method which makes it possible to compile a (combination of) LESS file(s) into a CSS style sheet which you can then attach to your web pages as usual.

In later tutorials you will learn:

  • how Bootstrap’s LESS files are structured/related to one another

  • to create a new theme while leaving the original Bootstrap LESS files intact (making it easier when Bootstrap releases an update)

  • how you can change Bootstrap’s LESS variables and mixins to create your own theme

  • to use LESS nesting to make your files easier to understand (and save time creating them)

  • about more complex uses of LESS

Add your comment