Less for Advanced Styling

Less is sometimes more, as they say, and this saying certainly fits a tool I am about to describe. As the tool’s name suggests, its goal is to make the coder’s job easier. Less is a tool intended for web styling and it brings about a bunch of interesting features compared to classic CSS.

Down with the repetition of the identical class names over and over again, down with having to remember all the hexadecimal combination of individual colours, and a lot more. Let’s take a look!

Before moving on to the more complex features and functions, let me first explain a few basic ones for those who are hearing of Less for the first time.

Variables

Using variables in Less is the most fundamental activity, and certainly one I recommend. You don’t need to remember the mobile resolution dimension or various colour combination codes. All it takes is to declare variables above the style definition itself, save the values into those variables and then use them anywhere in the code.

    //VARIABLES 
    @myColor: #FFF; 
    body {
        background-color: @myColor; 
    } 

Nesting and its unique features

One of the big advantages of Less is the nesting of inner elements of individual classes. By using this feature, you make sure the behaviour only changes where you need it and nowhere else. The nesting also makes the code more intelligible and divisible into individual segments and levels within them.

    body {
        .content { 
            p { 
                font-size: 14px; 
            } // closes styles for paragraph 
        } // closes styles for the class
    }

The ampersand (&) is going to be an important character for us used in nesting. It represents an element we need to style in a nested structure. Here’s an example to give you an idea.

    body {
        .content {
            a {
                &:hover { // means: a:hover
                    text-decoration: none; 
                } 
            } 
        } 
    }

And this is how the resulting CSS is going to look like:

    body .content a:hover { text-decoration: none; }

Let’s have this chunk of HTML code where a list is defined:

    <ul>
        <li>Default Item</li>
        <li>Default Item</li>
        <li class="special">Special Item</li>
        <li>Default Item</li>
    </ul>    

We can then treat the .special class in Less like this:

    ul { 
        li { 
            color: #000; 
            &.special { 
                color: #00FF00; 
            }
        } 
    }

Mixins

Mixins represent a pre-defined property you can use anywhere in the code. This property can (but doesn’t have to) assume the parameters entered as a variable (or variables) in a given mixin. Think of a mixin as a simple coding function. A mixin starts with a dot followed by the name of the mixin and () brackets that may include values entered instead of default ones.

    //MIXINS 
    .myMixin(@size: 12px, @family: 'Open-Sans', @weight: 400) { 
        font-size: @size; 
        font-family: @family; 
        font-weight: @weight; 
    }

    body { 
        .content {
            p {
                .myMixin(); // defaults are used
                            // see mixin definition 
                span { 
                    .myMixin(14px, Arial, 300); // defaults replaced by custom values 
                }
            }
        }
    }

A mixin may, however, include no parameters. What we call a “clearfix” is an example of that.

Clearfix must be used where there are “floating” blocks and you need to finish those. See the following exhibit:

    //MIXINS
    .clear-fix() {
        &:after {
            content: '';
            display: block;
            clear: both;
        }
    }

    body {
        .content {
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .clear-fix();
        }
    }

Loops

Yes, you’re reading that right. You can use a cycle in CSS (and Less) just as well. This feature takes advantage of recursion and the more experienced of you will certainly recognize the principle of putting the loop together. To start with, you choose a counter that goes down with each iteration by a value you define and this is repeated until the value drops below a certain level ending the cycle.

    //LOOP
    .loop(@i) when (@i > 0) { // variable i controls the loop
        .padding_right_@{i}0{ 
            padding-right:(@i*10px);
        }
        .loop(@i - 1); // we call the mixin recursively and lower the iteration variable
    }

    .loop(3); // this is where we call the mixin

This is what the output is going to look like:

    .padding_right_30 { padding-right: 30px; }
    .padding_right_20 { padding-right: 20px; }
    .padding_right_10 { padding-right: 30px; }

The Cons

Not everything about Less is flawless. There are also those things that do more harm than good in the code.

Unnecessary nesting

Nesting and especially multiple nesting can get you to thin ice. Be careful to avoid nesting the structure too deep – it’s easy to get lost and tangled up in your own code. Nesting basically isolates same class names in different higher-level containers. As shown in the example below:

    .content {
        .wrapper {
            a {
                &.button {
                    background-color: red;
                }
            }
        }
    }

The disadvantage of this multiple nesting pops up whenever you have the .button global class anywhere else than under the .content class because a redundant duplication of styles in the code will be necessary. This is what it’s going to look like in CSS code:

    .content .wrapper a.button {
        background-color: red;
    }    

In this specific example, there is an easily available solution: defining a general style for the .button class somewhere higher up in the code and then making only one or two modifications of the default properties of the class. Another option is to declare a mixin and use it wherever in the code:

    .button() {
        display: inline-block;
        position: relative;
        text-align: center;
        padding: 6px 12px;
        text-transform: uppercase;
        text-decoration: none;
        background-color: #333;
        color: #FFF;
        &:hover {
            background-color: #FFF;
            color: #333; 
        }
    }

    body {
        a.button {
            .button();
        }
    }

File import

You can run into another problem if you’re trying to import one Less file into another Less file. To give you an idea: Let’s have two files: reset.less and main.less. The first file will contain the default settings for individual HTML elements:

reset.less:

    div, span, object, iframe, img, table, caption, thead, tbody, tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu, nav, footer, header, section, summary, mark, audio, video { 
        border: 0; 
        margin: 0; 
        padding: 0; 
    } 

    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, legend, label { 
        border: 0; 
        font-size: 100%; 
        vertical-align: baseline; 
        margin: 0; 
        padding: 0; 
    }

main.less - in addition to our custom styles, this file will also contain the import of the file defined above:

    //IMPORT
    @import "reset.less"

The problem occurs if you change any property in the reset.less file but the only file linked to the project is main.less. If your CSS files are regenerated only when changes on the main.less file are detected, that itself will not pick up the changes.

How to use Less

If you got this far, I have the courage to say you’ve found my article interesting. And it’s a good idea to explain how to get Less running on your own machine.

The simplest way is to use JavaScript. This script will take care of converting styles into regular CSS.

You first need to download less.js. Then you create a file with a .less suffix and you input styles in Less, just as you’ve learned them in this article. Last but not least, you need to link both files to your project:

    <head>
        <link rel="stylesheet/less" type="text/css" href="styles.less" />
        <script type="text/javascript" src="less.js"></script>
    </head>

Compiling in PHP

Another way to use Less is through a PHP compiler. It’s  the Lessphp project that you plug into your PHP project. You’ll have several options available to compile your Less file into a classic CSS.

    require "lessc.inc.php";
    $less = new lessc;
    $css = $less->compileFile("styles.less");   // compiling into CSS
    file_put_contents("styles.css", $css);      // storing as file

Compared to JavaScript, the PHP compiler’s advantage is in the speed of applying styles. The JavaScript solution has some delay. Another advantage is the option to turn off compiling in the production and use styles that have been generated already.

So now, nothing stands in your way to start using less, replacing the classic CSS.

Alternatives

Alternatives to Less include languages such as Sass, SCSS and Stylus.

SCSS is very much like Less - with only a few differences such as the declaration of variables and the definition of mixins:

    //VARIABLES
    $bgColor: #333;
    $borderColor: #FF0000;

    body {
        background-color: $bgColor;
    }

    //MIXINS
    @mixin specialBg() {
        background-color: $bgColor;
        border: 10px solid $borderColor;
    }

    body {
        .content {
            @include specialBg();
        }
    }    

In Sass and Stylus you can forget squiggly { brackets } and semicolons and in Stylus you can even forget colons. You also need to stick to exact tabs. Each level is tabbed further from a higher level.

Sass:

    //VARIABLES
    $bgColor: #333
    $borderColor: #FF0000

    body
        background-color: $bgColor

There are also changes in mixins:

    //MIXINS
    =specialBg()
        background-color: $bgColor
        border: 10px solid $borderColor

    body 
        .content 
            +specialBg()

Stylus:

    //VARIABLES
    bgColor = #333
    borderColor = #FF0000;

    //MIXINS
    specialBg()
        background-color bgColor
        border 1px solid borderColor

    body
        background-color bgColor
        .content
            specialBg()

Conclusion

There are clearly more advantages than disadvantages to Less. And in comparison to a classic CSS, it offers a bunch of interesting features to simplify your project work.