We need to be using less CSS and go back to using inline styles and tables…

…just kidding…

This post is about the LESS CSS framework that is supposed to make CSS development quicker and easier. This is how it’s described on the official site:

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

LESS is MORE

So why is everyone so excited about LESS? Here are just 3 features to get your geek juices flowing:

Variables

Tired of copying and pasting the same hex color code throughout your stylesheet in multiple places? What if you need to change that color? Well, variables will save you some find and replacement time. Just define your variable once in your stylesheet once with an easy name to remember, then use that variable name instead of the color code e.g.

@primaryColor: #262262;
#contentPrimary h1{ color: @primaryColor;}

Nested Rules

I like to write my list-based menu styles with the parent container ID as my main identifier to determine the style of the menu. For example:
#wrapNav .menu{ list-style: none; margin: 0; padding: 0}
#wrapNav .menu li{ display: block; float: left;}
#wrapNav .menu li a{ display: block; padding: 0.25rem; font-size: 1rem; color: #333;}

That’s a lot of #wrapNav’s and .menu’s. We can write this in a way that makes more sense visually with LESS:

#wrapNav{
     .menu{ list-style: none; margin: 0; padding: 0;
          li{  display: block; float: left;
               a{ display: block; padding: 0.25rem; font-size: 1rem; color: #333;}
          }
      }
}

Mixins

Let’s say you have a set of properties that you want to keep consistent across multiple rules for different elements. For example, you want your border-radius to always be 3px. You can do this:

@roundedness: 3px;

.round-borders{
border: 1px solid #333;
-moz-border-radius: @roundedness;
-webkit-border-radius: @roundedness;
-khtml-border-radius: @roundedness;
-ms-border-radius: @roundedness;
}

.box{
color: red;
.round-borders;
}

.differentBox{
color: blue;
.round-borders;
}

If this has got you excited, you read more about parametric mixins, operations, color and math functions at lesscss.org.

How do I start using it?

This is where it can start getting complicated. LESS has to be compiled by a compiler to translate the LESS files into standard CSS. This can be done in 3 different ways:

1. Client-side. LESS can be compiled with JavaScript executed in the browser with the less.js script. This is the easiest to implement, but the slowest to render.
2. Server-side. This is the best for workflow and fasted to load, but I’ve heard it can be difficult to install on the server in some environments.
3. Local. You can use a free local compiler such as LESS.app which will convert your .less file into standard CSS . You can start using this method right now!

What do you think?

Is LESS totally awesome or is it a departure from web standards? Does it really speed up the workflow that much or is it a pain to remember the syntax? How do you think this would work in a collaborative team environment? What would your clients think? Could they care LESS?!

Feel free to discuss over lunch, around the dinner table or in the comments!