12.6-1211 Summary

Less
Declare first, then reference
Variable:
@ Name: Value
For example:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {color: @light-blue;}

Output #header {color: #6c94be;}
If the same variable is defined two times, the last defined in the current scope will be used. This is similar to the mechanism of CSS, where the last defined value becomes the value of this property.
# # # #混合:
. Name: Value
In less we can define some common set of properties as one class, and then call these properties in another class, such as:
. bordered {
border-top:dotted 1px black;
Border-bottom:solid 2px Black;
}
If we now need to introduce those common attribute sets in other classes, we just need to call them in any class like this:
#menu a {
Color: #111;
. bordered;
}
. Post a {
color:red;
. bordered;
}
The attribute styles in the. Bordered class will be reflected in #menu a and. Post a:
#menu a {
Color: #111;
border-top:dotted 1px black;
Border-bottom:solid 2px Black;
}
. Post a {
color:red;
border-top:dotted 1px black;
Border-bottom:solid 2px Black;
}
Mixed with parameters:
. Border-radius (@radius) {
Border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
Multi-parameter blending:
. Name (@ name): value
Scope:
The scopes in less are very similar to other programming languages, starting with a local lookup of a variable or a hybrid module, and if not found, it goes to the parent scope until it is found.

12.6-1211 Summary