Introduction to LESS"
From Documentation
Line 1: | Line 1: | ||
{{ZKStyleCustomizationGuidePageHeader}} | {{ZKStyleCustomizationGuidePageHeader}} | ||
− | |||
= Introduction = | = Introduction = | ||
− | LESS is the dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. | + | [http://lesscss.org/ LESS] is the dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. |
− | LESS was developed by [http://cloudhead.io/ Alexis Sellier], more commonly known as [http://cloudhead.io/ cloudhead]. It is now | + | LESS was developed by [http://cloudhead.io/ Alexis Sellier], more commonly known as [http://cloudhead.io/ cloudhead]. It is now [http://lesscss.org/#about maintained and extended by the LESS core team.] |
= Basic Usage = | = Basic Usage = | ||
Line 59: | Line 58: | ||
</source> | </source> | ||
− | |||
− | |||
=Version History= | =Version History= |
Revision as of 02:40, 8 April 2022
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 |
---|---|---|