Coding with LESS for better web development

A while ago I switched from CSS to LESS and have to admit that I won't be turning back. At first I was a little resent to switch from CSS to a new language, but after playing with it for about 4 hours it just clicked.

The language is very simple to transition to from CSS.

As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS.

from the lesscss.org site

Importing LESS files

The most useful power of LESS lies in its variables, mixins, operations and functions. It is best to split all of them in separate files and then import them into our main less file. we include them with the following code at the beginning of our stylesheet:

@import url(variables.less);
@import url(mixins.less);

It is not a good practice to use import statements with css files, because of optimization reasons. Imported files increase the number of requests, which is not a good optimizing practice. Instead we use less files that get combined with the main file and then exported to the css file. So instead of having 3 requests for the main, variables and mixins, we only have one request. When the less files get compiled they get merged into one file.

Using variables for a more consistent brand identity

When we do web design we normally decide on a color palette. We should use the same colors throughout the whole website. With LESS this has become much easier. Using variables we can store values and use them across our file. We can define them only once. For example we are given the primary, secondary and text colors. We can put them into variables like this:

@primaryColor: #32baf4;
@secondaryColor: #de7f0c;
@textColor: #ffffff;

It is now easy to call these variables where we need them. Lets say we want to have a div with a background color, and inside a heading and text with different colors. We simply achieve it with:

div {
  background: @primaryColor;
  h1 { color: @secondaryColor; }
  p { color: @textColor; }
}

The beauty of this is, if we later decide to change a color, we just change it in the variable definition and it will update across the entire site.

LESS mixins for easier CSS3 implementation

We use mixins for grouping css properties into one rule set and then easily calling it in the less file. Because we still need to support some of the browser prefixes it’s always a hassle to write them each time, over and over again. We can easily make a mistake and forget one of them. That is why we use mixins. We define the rules only once and can later remove the prefixes if the browsers start to support the normal declarations.

For rounded corners we use the following:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  moz-border-radius: @radius;
}

We simply apply it with the default value of 5px:

div {
  .rounded-corners;
}

We can also override the values:

div {
  .rounded-corners(5px 0 5px 0);
}

There are many more use cases with mixins, the best way is to try and experiment. Most of the time you will use them for CSS declarations. If you do not want to create your own mixins, you can check out the LESS file hosted on GitHub by Dmitry Fadeyev. The file has a lot of predefined rules that can help you implement some of the CSS3 features.

There is also use a special variable @arguments. We use it if we do not want to deal with individual parameters.

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #888) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

We call it with:

.box-shadow(1px, 2px, 3px, #777);

Nesting the code

One of my favorite features of LESS is nesting. It feels more natural to write css code in that way. Also the code looks more clean and readable. Lets say we have the following block of CSS:

  #header { background: #ccc; }
  header span { color: #fff; }
  header span i { font-style: bold; }
  header:hover { background: #000; }

It transforms beautifully into LESS like this:

#header {
  background: #ccc;
  span {
    color: #fff;
    i { font-style: bold; }
  }
  &:hover { background: #000; }
}

Mathematical functions and operations

LESS provides some mathematical functions:

percentage(0.8); /* returns 80% */
round(2.67); /* returns 3 */
ceil(1.4);   /* returns 2 */
floor(6.6);  /* returns 6 */

We can also operate on any number, color or variable:

@value: 15%;
@number: @value / 5; /* returns 3% */
@color: #777777 / 3; /* returns #282828 */
@height: 100% / 2; /* returns 50% */
@width: 100% / 4; /* returns 25% */

There are a lot more examples on the official LESS site. Especially interesting are the operations with colors.

Media queries in LESS

We can use media queries normally and from version 1.3 we can bubble the media queries. What that means is that the media queries can be nested inside other statements.

#header {
  width: 80%;
  @media (max-width: 480px) { width: 100%; }
}

The above code will result in the CSS bellow:

#header { width: 80%; }
@media (max-width: 480px) {
  #header { width: 100%; }
}

As mentioned above the bubbling of media queries is a great addition to writing responsive web sites. The only downside is, that you will have a lot of media queries in your stylesheet. You have to be careful to not override the media queries. The optimal solution would be that in the recompiling process the media queries would be grouped together and put at the end of the document.