Less Variables

With Less, you can now declare variables and reuse them throughout your code. No more find-and-replace for global updates and no more constant referencing a color palette.

Variables as Values

Here's how variables are declared:

// dashes or underscores work
@link-color: #35f3e4;
@default-font-size: 16px;

a {
    color: @link-color;
    font-size: @default-font-size;
}

It's that easy!

Table of Contents

    Lazy Evaluation

    Here's an important note about Less variables: Variables are Lazy Evaluated.

    This is a just a complicated way to say, variable order doesn't matter. Here's what I mean:

    a {
        color: @link-color;
        font-size: @default-font-size;
    }
    
    @link-color: #35f3e4;
    @default-font-size: 16px;

    Variables in Selectors

    Imagine you wanted to prefix some of your classes. You could do this with variables like so:

    @popup-prefix: super-popper;
    
    // Usage
    .@{popup-prefix} {
        .box {
            background: black;
            a { font-size: 25px; }
        }
    }

    Variables as Image Path

    Another really good use case is for defining an image path. Here's a solid example:

    @image_path: '../../../../../img';
    .cover-image {
        background-image: url('@{image_path}/background.jpg');
    }