3 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 make it more powerful as a CSS Pre-processor.

There have been a bunch of new additions to 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 all in one pot. Then they import them with the @import rule into 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 we would end 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 external.less into style.less. Then, we have a .square mixin in external.less to define the style for square boxes. Within style.less, we use the mixin like so.

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

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

.square {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: red;
}

.box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: red;
}

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:

 @import (reference) "external";

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

.box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: red;
}

Extend

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

.box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid black;
  background-color: transparent;
}

.box2 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid black;
  background-color: red;
}

This is redundant and does not follow best practices, which suggest grouping the same styles together. Sass, in this case, is known for 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:

.square, .box, .box2 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid black;
}

.box {
  background-color: transparent;
}

.box2 {
  background-color: red;
}

Merging Property

Another cool new feature is Merging Property. This feature applies to CSS properties 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, the CSS3 Box Shadow property accepts multiple shadow values. By using this Merging Property, you can build shadow effects easily and make them more manageable.

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

.inner-shadow {
  box-shadow: inset 10px 10px 5px #ccc;
}

.outer-shadow {
  box-shadow: 10px 10px 5px #ccc;
}

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 follows:

.box {
  .inner-shadow;
  .outer-shadow;
}

.box2 {
  .inner-shadow;
}

.box3 {
  .outer-shadow;
}

This code will give us the following result.

.box {
  box-shadow: inset 10px 10px 5px #ccc, 10px 10px 5px #ccc;
}

.box2 {
  box-shadow: inset 10px 10px 5px #ccc;
}

.box3 {
  box-shadow: 10px 10px 5px #ccc;
}

Final Thought

These 3 new features – Referencing External File, Extend, Merging Property – have 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.