Less learning notes (1), less learning notes (

Less learning notes (1), less learning notes (

The less statement is as follows:
. Content {
Ul {
List-style: none;
}
Li {
Height: 25px;
Line-height: 25px;
Padding-left: 15px;
Background: url ("arr.jpg") no-repeat center left;
A {
Text-decoration: none;
Color: #535353;
Font-family: microsoft yahei, "", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
}
}
Comment writing
// Only display in LESS
/* It will be displayed in LESS and CSS */

Compile a less tool koala (available before learning node. js)

Define variables starting @
When defining a variable as a property name or selector:
@ A: width;
. @ {}{
@ {A}: 960px;
}
When the variable is defined as url: @ url: "/* contains the address */";
Define variables and delay loading feature, that is, you can use variables first and then define variables;
When multiple variables are defined, the principle of proximity in the same sibling scope is used.

Mixed Mode: puts a common css style into a selector similar to a class:. a () {/* Common style */}
Add. a to the style to drink the style in. ().

Mixing with selector:. B {&: hover: {border: 1px solid red ;}}
Div {. B ();}
Mix with parameters:. B (@ color: red) {border: 1px solid @ color}
Div {& hover {B (yellow )}}
&: Parent element with the current element of the table. If & is placed in the selector, the current selector will be inserted before all parent selectors;
When multiple parameters are passed:
If all parameters in the brackets are separated by commas (,), the parameter values are transmitted in sequence,
If there are "," and ";" in the brackets, the ";" is regarded as a whole and passed to a parameter value.
Naming parameters:
. Mixin (@ color: black; @ margin: 10px; @ padding: 20px ){
Color: @ color;
Margin: @ margin;
Padding: @ padding;
}

. Class1 {
. Mixin (@ margin: 20px; @ color: #33 acfe );
}
. Class2 {
. Mixin (# efca44; @ padding: 40px );
}
. Class3 {
. Mixin (@ padding: 80px ;)
}

@ Arguments usage:
. Border (@ x: solid, @ c: red ){
Border: 21px @ arguments;
}
. Div1 {
. Border (solid );
}

Matching mode:
. Border (all, @ w: 5px ){
Border-radius: @ w;
}
. Border (t_l, @ w: 5px ){
Border-top-left-radius: @ w;
}
. Border (t_r, @ w: 5px ){
Border-top-right-radius: @ w;
}
. Border (B-l, @ w: 5px ){
Border-bottom-left-radius: @ w;
}
. Border (B-r, @ w: 5px ){
Border-bottom-right-radius: @ w;
}

Footer {
. Border (t_l, 10px );
. Border (B-r, 10px );
Background: #33 acfe;
}
Mixed return values:
. Average (@ x, @ y ){
@ Average: (@ x + @ y)/2 );
@ He :( @ x + @ y );
}

Div {
. Average (16px, 50px );
Padding: @ average;
Margin: @ he;
}

Operation:
Less will automatically deduce the Unit for you, so as long as any value in the operation has a unit to achieve the operation
During the less operation, the color value is first converted to the rgb mode, then converted to the hexadecimal color value and returned
In rgb mode, the value ranges from 0 ~ 255. When your value exceeds 255, the addition operation is performed at 255.
The English Color name cannot be used for calculation.
Function:
Rgb is a function in less, and a hexadecimal color value is returned.
Red (), green (), blue () input a hexadecimal color value will return a decimal value of the corresponding color
Namespace:
Demo1:
# Bgcolor (){
Background: # ffffff;
. {
Color: #888888;
&: Hover {
Color: # ff6600;
}
. B {
Background: # ff0000;
}
}
}

. Wi {
Background: green;
Color: # fff;
. {
Color: green;
Background: # ffffff;
}
}

. Bgcolor1 {
Background: # fdfee0;
# Bgcolor>.;
}
. Bgcolor2 {
. Wi>.;
}
Demo2:
// Omitted> Writing Method
# Bgcolor (){
Background: # ffffff;
. {
Color: #888888;
&: Hover {
Color: # ff6600;
}
. B {
Background: # ff0000;
}
}
}
. Wi {
Background: green;
Color: # fff;
. {
Color: green;
Background: # ffffff;
}
}
. Bgcolor1 {
Background: # fdfee0;
# Bgcolor.;
}
. Bgcolor2 {
. Wi.;
}
Summary namespace: the above two demos are visible. The reference of duplicate styles in less is similar to that in css using a subset selector.