From Documentation

Jump to: navigation, search



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

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

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


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

@green: #46A546;

.greendiv {
    background: @green;

will output

.greendiv {
    background: #46A546;


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 {

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

Last Update : 2013/11/22

Version Date Content

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.