‘LESS’– A dynamic language that simplifies your CSS

For this post, I am assuming you are a programmer like me and design is a planet just outside your universe. If you are from the design planet, you too can read on; may be there is something for you too!

Writing CSS is fun, exciting and easy until your website grows fat with pages and complicated layouts. If you have ever tried fixing a layout in such a page – you know what I mean. Did I talk about fixing a layout? Oh yeah thanks to all the browsers.

Many at times while writing CSS I wished I could write it more programmatically than just styling them. For e.g. If CSS had allowed variable declarations, I could have simply held the values in variables, perform few operations and re-use them in properties. But that’s too much to ask for from a stylesheet language which should just do styling!

Fortunately there are a few preprocessors like Sass & LESS that nicely extends CSS and adds everything a programmer ever wanted. After doing couple of research I picked up LESS to see how it works. I spent a few hours re-styling some of my demos with LESS and I am must say I am thoroughly impressed with this language. So here I’m explaining you about LESS.

So LESS

LESS is a dynamic stylesheet language that extends CSS and adds nice features like variables, mixins, operations and functions to it. More importantly it takes fewer efforts for developers to write complex CSS and build amazing looking websites real fast.  LESS uses existing CSS syntax that makes learning a breeze and you can always fall back to CSS.

LESS’ first version was written in Ruby and was used as a server side language which upon compiling emitted CSS. However in the later versions, use of Ruby is deprecated and replaced by JavaScript. Adding LESS.js JavaScript file to your HTML page allows real-time compilation within browsers. It also supports server side compiling with the help of Node.js making it easier for developers to choose between the two.

Adding Less.js – Client side usage

 

All LESS files should have the extension “.less” and you may have them under CSS directory of your webserver.

Add the following lines of code to your HTML page to ensure Pre-Compiling of CSS happens in your browser:

<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script src="js/less-1.3.3.min.js"></script>

Note: If you working on a local file system i.e. if you are accessing the page using “file:///” on Chrome or IE you may incur an error of “Cross origin requests are only supported for HTTP” or “Access Denied” respectively. These are some security related errors and I did not find a way to get rid of them. Host them on a development server and you will see this go away. However I did not find any issues with Mozilla Firefox.

Server side usage

 

If performance is what running in your mind then you can look at compiling these files on the server side. First, download and install Node.js, then using npm  download the less compiler(lessc.cmd).

To compile use this command:

lessc styles.less > styles.css

For more options like CSS minifying, run lessc without parameters.

There are few nice editors out there that will let you live compile these files. For e.g. I use WebStorm which nicely compiles LESS to CSS as I type. If you are on a large project and most of your developers are comfortable on LESS then you can add the sever side compilation step to your build task.

Now that you have know how to make “.less” files and compile them to CSS, let’s look at this language in detail.

Variables

As mentioned earlier variables are one nice feature to have in stylesheets. LESS let’s you add variables with the help of @ symbol and use them into properties. Find below an example where I set background-color and color of the body with the help of variables.

@backgroundColor: #333;
@color: #fff;

body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px #000;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
}

These variables can be now re-used in the rest of the code and any change that you make to color will apply to all. CSS codes can co-exist with LESS – If you notice only two of the properties were set by variables and the rest is CSS.

Operations

Now that you know variables are a possibility in stylesheet, you must be happy to know that you can perform operations on them. It’s easy! Here’s is an example of how to do it:

@baseColor: #000;
@backgroundColor: (@baseColor + #333);
@color: (@backgroundColor / 3);
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;
#body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

Have a look at how @backgroundColor, @color and font-size gets the calculated value from an operation. Find below the output that gets generated.

Output:

#body {
  background-color: #333333;
  color: #111111;
  border-top: solid 10px #000000;
  font-size: 0.85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

Mixins

Mixins help you reuse the whole bunch of properties from one ruleset into another ruleset. Here’s an example:

@baseColor: #000;
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;

.gradients {
  /*local scoped variables*/
  @gradientStartColor: #eaeaea;
  @gradientEndColor: #cccccc;
  background: @baseColor; /* variable from global scope */
  background: linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -o-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -ms-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -moz-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -webkit-linear-gradient(top, @gradientStartColor, @gradientEndColor);
}

#body {
 .gradients;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

In the above code you can see how .gradients ruleset is re-used into #body. It’s a pretty nice feature, think about how less code you need to write now!

Variable Scoping

 

Like every other programming language, LESS provides variable scoping too. Variables are looked up locally first and when not found it will search globally. In the above example you can see that the @baseColor is being used in both .gradients and #body. If you have locally scoped variables like @gradientStartColor and @gradientEndColor they are not accessible outside the scope unless they are mixed in. In the above example #body can access those variables inside since .gradients is referred.

Check out Scope for more info.

Parametric Mixins

This is special type of ruleset which can be mixed in like classes, but accepts parameters. Here’s an example that sets up border-radius for different browsers.

.border-radius (@radius: 4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#body {
 .gradients;
  .border-radius;
  border-top: solid 10px @baseColor;
}
#sidebar{
  .border-radius(25px);
  background: #eee;
}

If you look at #body it calls without parameters that’s because LESS allows to set default values of parameters which in this case is 4px. Look at #sidebar for call with parameters. You can also set multiple parameters, check this out for more information.

Functions

LESS provides few helper functions for transforming colors, string manipulation, and do math. Find below an example from the LESS documentation which uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:

#sidebar{
  width: percentage(0.5);
  color: saturate(@baseColor, 5);
  background-color: spin(lighten(#ff0000, 25%), 8);
}

Check out Function Reference for details.

Summary

By now you would have a fair idea of what LESS brings to the table. But be aware that LESS is not the only CSS preprocessor. There is Sass which stands for Syntactically Awesome Stylesheets and few others but they aren’t popular. There are various blogs out there which will tell you some good comparison between the two. I suggest you try both and stick to the syntax that you like! After all they emit CSS

Have a feedback? Find me on twitter @nishanil