Introduction to LESS

From Documentation
Revision as of 08:16, 7 November 2013 by Vincent (talk | contribs) (Created page with "{{ZKStyleCustomizationGuidePageHeader}} = Introduction = LESS is the dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations a...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


Introduction to LESS



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 demonstrate simple usage of LESS, refer to LESS official site for more detail. 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

Version History

Last Update : 2013/11/07


Version Date Content
     



Last Update : 2013/11/07

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