Less allows CSS to support variables, operators, include, and nested rules.

I recently saw an interesting CSS extension on the Internet. I will introduce it to you here. Less is a ruby gem, which is used to extend the CSS syntax. After less is used, variables, operators, include, and nested rules can be used in CSS. Now the JS version of less is available. Let's take a look at what less can bring to us?

 

Use

1. Download JS: http://lesscss.googlecode.com/Latest Version looks like 1.0.22

2. If less is used, the suffix of the CSS file must be changed to. Less.

3. Add the following to the HTML page:Code

<! -- Style. Less file is the style table file, and style. Less must be loaded before the less-1.0.22.min.js file, the principle is introduced later -->

<LINK rel = "stylesheet/less" href = "style. Less"/>

<SCRIPT src = "less-1.0.22.min.js"> </SCRIPT>

 

Variable

Variables allow us to declare a constant value and reuse it in multiple places in the future.

 

General CSS syntax:

. Class1 {color: # CCC; width: 100px;}. class2 {color: # CCC; width: 120px ;}
 

 

Less Syntax:

 
@ Color1: # CCC;. class1 {color: @ color1; width: 100px;}. class2 {color: @ color1; width: 120px ;}
 

Inlucde You must have met that some styles needed in a rule are the same as those of another rule style. However, we can only copy them or specify multiple classes for the element. But with less, we don't need to be so painful. General CSS syntax:

 
. Red {color: red; Border: 1px solid red ;}. class2 {width: 100px; font-size: 12px;/* the following style is the same as that of red. If you copy it, you need to change it to 2 places */color: red; Border: 1px solid red ;}
 

 

Less Syntax:

. Red {color: red; Border: 1px solid red;}. class2 {width: 100px; font-size: 12px;/* rules for direct inlcude. Red */. Red}
 

Nested rules: General CSS syntax:

 
# Header {color: Red ;}# header. LOGO {backgroud-image: url(logo.gif) ;}# header Li {display: block ;}
 

Less Syntax:

 
# Header {color: red;. LOGO {backgroud-image: url(logo.gif) ;}li {display: block ;}}
 

OPERATOR: Less Syntax:

 
@ Fontsize 12px;. class1 {font-size: @ fontsize + 2;}. class2 {font-size: @ fontsize * 2 ;}
 

Other functions: See less official website: http://lesscss.org/
Principle Analysis: The less JS version is implemented by using Ajax to obtain the style. Less file, and then generate the CSS that the browser can understand according to the file rules and insert it into the HTML code. Therefore, the <LINK rel = "stylesheet/less" href = "style. Less"/> mentioned earlier must be in front of Js.
Summary: The implementation principle of the less JS version is that each request must use js to dynamically generate the original CSS. If CSS is large, it will have a great impact on the performance of the client, therefore, I personally think the less JS version is not practical. I don't know how the implementation principles of the less Ruby version are. I think if I really think that the less method can improve CSS development efficiency, I can refer to its code to implement a set of Java or net Source code , In Program At startup, all CSS files are generated based on the. Less file at a time, instead of generating them dynamically using Js for each request.

 

PS: I accidentally searched and found a Net version of less. You can see how this version is implemented. : Http://www.dotlesscss.com/