Introduction to LESS"

From Documentation
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
 
{{ZKStyleCustomizationGuidePageHeader}}
 
{{ZKStyleCustomizationGuidePageHeader}}
 
{{Deprecated| url=[[ZK_Developer's_Reference/Theming_and_Styling/Creating_Custom_Themes/Theme_Template| ZK Developer's Reference ...Theme Template]]}}
 
  
 
= Introduction =
 
= Introduction =
  
LESS is the dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.<ref> http://lesscss.org/ </ref>
+
[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 maintained and extended by the LESS core team. <ref> http://lesscss.org/#about </ref>
+
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 57:
 
</source>
 
</source>
  
= References =
 
<references/>
 
  
 
=Version History=
 
=Version History=

Latest revision as of 02:40, 8 April 2022


Introduction to LESS



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

Last Update : 2022/04/08


Version Date Content
     



Last Update : 2022/04/08

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