Contact

Less for advanced styling

Less is sometimes more, as they say, and this saying certainly fits a tool I am about to describe.
As the tool’s name suggests, its goal is to make the coder’s job easier. Less is a tool intended for web styling and it brings about a bunch of interesting features compared to classic CSS.

Down with the repetition of the identical class names over and over again, down with having to remember all the hexadecimal combination of individual colours, and a lot more. Let’s take a look!

Before moving on to the more complex features and functions, let me first explain a few basic ones for those who are hearing of Less for the first time.

Variables

Using variables in Less is the most fundamental activity, and certainly one I recommend. You don’t need to remember the mobile resolution dimension or various colour combination codes.
All it takes is to declare variables above the style definition itself, save the values into those variables and then use them anywhere in the code.

//VARIABLES
@myColor: #FFF;
body {
background-color: @myColor;
}

Nesting and its unique features

One of the big advantages of Less is the nesting of inner elements of individual classes. By using this feature, you make sure the behaviour only changes where you need it and nowhere else. The nesting also makes the code more intelligible and divisible into individual segments and levels within them.

Mixins

Mixins represent a pre-defined property you can use anywhere in the code. This property can (but doesn’t have to) assume the parameters entered as a variable (or variables) in a given mixin.
Think of a mixin as a simple coding function. A mixin starts with a dot followed by the name of the mixin and () brackets that may include values entered instead of default ones.

Loops

Yes, you’re reading that right. You can use a cycle in CSS (and Less) just as well.
This feature takes advantage of recursion and the more experienced of you will certainly recognize the principle of putting the loop together.
To start with, you choose a counter that goes down with each iteration by a value you define and this is repeated until the value drops below a certain level ending the cycle.

//LOOP
.loop(@i) when (@i > 0) { // variable i controls the loop
.padding_right_@{i}0{
padding-right:(@i*10px);
}
.loop(@i - 1); // we call the mixin recursively and lower the iteration variable
}
.loop(3); // this is where we call the mixin

The Cons

Not everything about Less is flawless. There are also those things that do more harm than good in the code.

Unnecessary nesting

Nesting and especially multiple nesting can get you to thin ice. Be careful to avoid nesting the structure too deep
– it’s easy to get lost and tangled up in your own code. Nesting basically isolates same class names in different higher-level containers.
As shown in the example below:

.content {
.wrapper {
a {
&.button {
background-color: red;
}
}
}
}

The disadvantage of this multiple nesting pops up whenever you have the .button global class anywhere else than under
the .content class because a redundant duplication of styles in the code will be necessary. This is what it’s going to look like in CSS code:

.content .wrapper a.button {
background-color: red;
}

In this specific example, there is an easily available solution: defining a general style for the .button class somewhere higher up
in the code and then making only one or two modifications of the default properties of the class. Another option is to declare a mixin and use it wherever in the code:

File import

You can run into another problem if you’re trying to import one Less file into another Less file. To give you an idea:
Let’s have two files: reset.less and main.less. The first file will contain the default settings for individual HTML elements:

main.less - in addition to our custom styles, this file will also contain the import of the file defined above:

//IMPORT
@import "reset.less"

The problem occurs if you change any property in the reset.less file but the only file linked to the project is main.less.
If your CSS files are regenerated only when changes on the main.less file are detected, that itself will not pick up the changes.

How to use Less

If you got this far, I have the courage to say you’ve found my article interesting. And it’s a good idea to explain how to get Less running on your own machine.

The simplest way is to use JavaScript. This script will take care of converting styles into regular CSS.

You first need to download less.js.
Then you create a file with a .less suffix and you input styles in Less,
just as you’ve learned them in this article. Last but not least, you need to link both files to your project:

Compared to JavaScript, the PHP compiler’s advantage is in the speed of applying styles. The JavaScript solution has some delay.
Another advantage is the option to turn off compiling in the production and use styles that have been generated already.

So now, nothing stands in your way to start using less, replacing the classic CSS.

Alternatives

Alternatives to Less include languages such as Sass, SCSS and Stylus.

SCSS is very much like Less - with only a few differences such as the declaration of variables and the definition of mixins: