Getting Started with Less

Variables

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!

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');
}