Do more with LESS

LESS extends CSS with variables, mixins, methods and nested rules. In short, it makes CSS a lot easier to work with, and speeds up your web design.

CSS is a neat little language, but its pretty basic, and is missing a lot.  With browsers using different syntax for selectors, you often find yourself repeating code, for example

.roundedelement
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
}
.otherroundedelement
{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
}

Mixins

Each time you want to add a border radius to an element, you have to specify all variations for maximum browser support.  But with LESS you can create a mixin to do this for you.

.rounded_corners(@borderradius: 5px)
{
    border-radius: @borderradius;
    -moz-border-radius: @borderradius;
    -webkit-border-radius:@borderradius;
    -khtml-border-radius:@borderradius;
}
.roundedelement
{
    .rounded_corners;
}
.otherroundedelement
{
    .rounded_corners(10px);
}

So we have basically added a method “rounded_corners” with a default radius of “5px” which we can then use by calling “.rounded_corners”.  No repeating the border radius code.  If that was the only feature, that would be enough of a reason to use LESS.

Variables

Variables are simply variables you can use in your LESS files, for example

@pageWidth = 720px;
.main
{
    width: @pageWidth;
}

Nested Rules

I really like this feature, it gives more structure to your css. But you must be careful, if you overuse it you risk creating slow css selectors. Which will have a big performance impact on your web site. So remember when you are designing a website not to over use this, or make deeply nested rules.

#header
{
    a
    {
        color:red;
        :hover
        {
            color:orange;
        }
    }
}
#footer
{
    .copyright
    {
        a
        {
            color:#d3d3d3;
            text-decoration:none;
            :hover
            {
                color:#fff;
                text-decoration:underline;
            }
        }
    }
}

Which you can easily see groups things a lot better, and you don’t have to create long rules like

#footer .copyright a
{
    color:#d3d3d3;
    text-decoration:none;
}
#footer .copyright a:hover
{
    color:#fff;
    text-decoration:underline;
}

I found using nested rules I was able to simplify my rules and remove some redundant and duplicate ones. Being able to easily add :hover to the nested rule is a really neat feature.

Operations

This feature is nice, but not one I would use often. But the fact you can do operations on colours makes it useful. You can easily create a colour scheme from a single theme colour.

@basecolor = #ff9900;
.main
{
    color:@basecolor * 3;
    border: 1px solid @basecolor * 2;
    background-color: (@basecolor + #333) * 1.5;
}

As you can see the operations can be quite complex, but not something you would use on a daily basis.

Getting LESS

There are a few ways you can start using this on your web sites:

1. Compile your LESS files in production and deploying the compiled .css file
   • Solutions
     • less the homepage for LESS. Download the offical Ruby gem from here.
     • less.app a Mac OS X application for compiling your LESS files.
   • Pros
     • Quickest delivery to client since it is already precompiled.
     • No need to install any extra software on server.
     • Guaranteed to produced desired CSS since testing will be done before deployment.
   • Cons
     • You may run into problems update the file, what if someone changes the .css file without changing the master LESS file?  All those changes will be lost when you recompile.
     • Each change needs a manual recompile and deploy.
2. Compile on the server side
   • Solutions
     • lessphp a PHP port of the LESS engine as a single includable class. This is the one I use
     • LESS.php a PHP port of the LESS engine, split into 3 different files.
     • WP-LESS a WordPress plugin for LESS.
   • Pros
     • Easy to update and maintain, since there are no CSS files that may mistakenly be updated.
     • Quick delivery, with caching after the first compile of the LESS it will be just as quick as the precompiled solution.
   • Cons
     • Requires software on the server, or code behind to do the compiling.
     • LESS might be incorrectly compiled and produced an invalid CSS file.
3. Compile on the client side
   • Solutions
     • LESS.js is a Javascript port of the LESS engine.
   • Pros
     • Easy to update and maintain, since there are no CSS files that may mistakenly be updated.
     • Nothing required on the server, so will work on any host.
   • Cons
     • Slowest solution, as the client needs to first download the LESS files and then compile on their machine in Javascript
     • Can’t guarantee compiled CSS will be expected CSS, unless you test every single browser under every single environment.
     • Dependent on Javascript, so if Javascript is disabled on the client your website won’t be rendered with CSS

My favourite method is 2, compiling on server side, with caching to maximise speed.  I’ve implemented a custom WordPress plugin using lessphp to cache and compile my LESS code on the fly, only recompiling when a change to a LESS file is detected.  Also I combine all my LESS files into one, before compiling, and I have a global.less file which contains my main functions and variables.

In reality when your are designing a web site you might find yourself at times writing more code using LESS, but you will be repeating yourself less.

Go try it out, I’ve started using LESS in all my web development.