When is LESS more?

Every website on the internet gets its “style” from files called “Style Sheets”. These “Style Sheets” describe how the elements on the HTML page should be displayed. Without these style sheets websites would be boring lists of black and white text.

The most common file type for a style sheet is Cascading Style Sheet (CSS). These CSS files use element types, IDs, and classes to identify elements and to apply “styles” to them. For example, if we have some text inside of a container element on our site we could edit that text like so:

.container .text { color: red; }

Now all of our text in that container will be red. Simple enough. Now lets think about how many different elements there are on modern websites, and how deeply nested some of those elements can be inside of other elements. Also, often you need to target multiple elements nested deeply in the HTML code. Let me give a very typical example of how a section of a CSS file might look on a modern website.

.wrapper .container-parent .text { font-size: 14px; line-height: 18px; }
.wrapper .container-parent .container-1 p { color: red; }
.wrapper .container-parent .container-1 ul { margin-left: 30px; }
.wrapper .container-parent .container-1 ul li { font-size: 12px; }
.wrapper .container-parent .container-1 a { text-decoration: none; }
.wrapper .container-parent .container-2 p { color: blue; }
.wrapper .container-parent .container-2 ul { margin-left: 10px; }
.wrapper .container-parent .container-2 ul li { font-size: 14px; }
.wrapper .container-parent .container-2 a { text-decoration: underline; }

This is obviously not from a real site but it demonstrates a very common scenario. For a long time it was difficult to keep CSS files readable and many developers experimented with indentation and other formatting tricks to help themselves and other developers read the CSS code.

In the last few years however a new trend has taken hold in the Web Development world known as LESS. Although LESS itself isn’t a style sheet it is compiled into a style sheet using Javascript. Now the same CSS above can be written in LESS like so:

.wrapper {
   .container-parent {
      .container-1 {
          p  { color: red; }
          a  {text-decoration: none; }
          ul { margin-left: 30px; }
          li { font-size: 12px; }
       }
       .container-2 {
          p  { color: blue; }
          a  {text-decoration: underline; }
          ul { margin-left: 10px; }
          li { font-size: 14px; }
       }
   }
}

To some this may seem just as ugly and complicated as the original but once you understand the hierarchy of LESS it really does make reading and working with the code much easier and really does keep the code cleaner. This becomes much more apparent when working with 1000+ line style sheets.

But wait, there is more! Because LESS is not a stylesheet in itself but is actually being compiled by another program that allows us to take advantage of variables and functions.

Most sites have a standard color palette to match their logo or brand. These colors are often repeated over and over again in a site’s style sheet. In CSS this means that every instance of this color needs to be hard coded.

body { background-color: #FF0000; }
.text { color: #FF0000; }

Now in LESS we can just declare this color as a variable and reuse it throughout the code like so:

@brand-red: #FF0000;

body { background-color: @brand-red; }
.text  { color: @brand-red; }

This alone makes LESS worthwhile but we also have the advantage of declaring functions inside of our code which can also be reused. Like so:

//Function to round corners correctly on all modern browsers
.rounded-corners(@radius: 5px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   border-radius: @radius;
}

//Apply to any element you want to round
.round-me { .rounded-corners; }

//Or pass in a different value
.round-me { .rounded-corners(10px); }

This type of functionality allows for a huge amount of reusability and standardization which makes the life of a developer so much easier.

We are really only scratching the surface here. There is so much to learn and do in LESS that I couldn’t possibly go into all of the options here.

For a more advanced list of LESS advantages check out this Smashing Magazine’s article.