3 New LESS CSS Features - 3 tính nắng mới của LESS trong CSS

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.

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.

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

In version 1.5, LESS introduced (reference), which can be used to instruct LESS to use the import file only for reference, and not to output the content.

Put the (reference) instruction this way:

Compile the LESS stylesheet, and now the .square is not output.

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.

Given the above example we can do:

@import (reference) "external";
.box {
	&:extend(.square);
	background-color: transparent;
}
.box2 {
	&:extend(.square);	
	background-color: red;
}

When compiled to regular CSS, the above code will produce:

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.

Notice that we add a + sign at the end of the property’s name. This + sign is required for this feature to work. Then, we can use these mixins, as follow:

This code will give us the following result.

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.