Introduction to LESS"
From Documentation
(Created page with "{{ZKStyleCustomizationGuidePageHeader}} = Introduction = LESS is the dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations a...") |
|
(No difference)
|
Revision as of 09:51, 7 November 2013
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
Version | Date | Content |
---|---|---|