Introduction to LESS

Introduction

LESS is the dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations, and functions.

LESS was developed by Alexis Sellier, more commonly known as cloudhead. It is now maintained and extended by the LESS core team.

Basic Usage

The following content demonstrates simple usages of LESS, please refer to LESS official site for more details. You can also try it online from http://less2css.org/

Variables

Define variables with "@" sign and use it as follows:

@green: #46A546;

.greendiv {
    background: @green;
}

will output

.greendiv {
    background: #46A546;
}

Mixins

Define a mixins as follows:

.top-border-radius(@size) {
    -webkit-border-radius: @size @size 0 0;
       -moz-border-radius: @size @size 0 0;
            border-radius: @size @size 0 0;
}

.topRoundedDiv {
    .top-border-radius(5px);
}

will output

.topRoundedDiv {
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
}

Version History

Version	Date	Content