Site Links

3 New LESS CSS Features You Should Know

It’s been a while since our last discussion on LESS CSS. Today, LESS CSS has reached version 1.5, and it has been evolving with new features that makes it more powerful as a CSS Pre-processor.

There have been a bunch of new additions in it, and in this post we are going to walk you through 3 of my new favorite features, Referencing External File, Extend, Merging Property, which can help us write better CSS. Let’s take a look.

File Import

First of all, let’s take a look at how LESS CSS handles external files with the @import rule.

Some people may split their stylesheet into multiple files, rather than putting it in one pot. Then they import them with the @import to another stylesheet, so that the Mixins (as well as the Variables) from those files can be reused in that other file.

@import "external.less";

The problem is that LESS will compile all the Mixins from these external files, so that we would ended up with multiple style rules that define the same thing.

Take a look at the following example: We have two LESS files called style.less and external.less. We import the external.less into style.less. Then, we have .square mixin in external.less to define the style for square boxes. Within the style.less, we use the mixin like so.

@import "external";
.box {
.square;
}

This will produce the following result in CSS. The style-rules from .square mixin is generated as well – which is no good.

Extend

Extend method is pure awesomeness. Technically, it groups selectors that share the same style-rules, which result in cleaner and more organised CSS. When we build a website, at some poins, we could end up having some selectors with closely similar style-rules, like below:

It is redundant, and does not follow best practices, which suggest putting the same styles together. Sass, in this case, is known with its @extend directive to do this job, in LESS we can do a similar thing with &:extend(), introduced in version 1.4.

Merging Property

Another cool new feature is Merging Property. This feature applies to the CSS property that accept multiple values, like transform, transition, and box-shadow. And as the name implies, it will merge values that belong to the same property. Let’s check out this example below.

As you probably already know, CSS3 Box Shadow property accepts multiple shadow values. By using this Merging Property, you can build shadow effect easily and make them more manageable.

Here we create two mixins .inner-shadow and .outer-shadow – I guess the names are self-explanatory.

Final Thought

These 3 new features – Referencing External File, Extend, Merging Property – motivated me to use LESS more. With them we can write better, and more manageable CSS. I’m looking forward to more cool new capabilities that LESS will offer in upcoming versions.