From Documentation

Jump to: navigation, search






Contents

Introduction

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

References

  1. http://lesscss.org/
  2. http://lesscss.org/#about

Version History

Last Update : 2013/11/22


Version Date Content
     




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