Less Development Guide (II)-basic syntax

(1) nested rules

[1] less allows us to write stacked styles in nesting mode. Let's first look at the following CSS section;

{:;}{:;}{:;} 

In LESS, you can use nesting to write the above Code:

{:;    }{:;        }{:;    }

Code changes are concise and intuitive, similar to the DOM tree structure.

 

[2] & Symbol

If you want to write a series selector in a nested rule instead of a descendant selector, you can use the & symbol, such as the hover pseudo-class writing method.

{:;:;            }

After compilation:

{:;}{:;}

 

(2) variables

[1] Definition

@ Name: value; (you need to add a semicolon at the end)

{:;}

After compilation:

{:;}

 

[2] string insertion variable value

{:} 

After compilation:

{:;}

 

[3] assign values between variables

{:}

After compilation:

{:;}

 

[4] pre-resolution

(1) Less variable calls can be used without variable Declaration;

(2) The same variable is defined multiple times, and the last defined in the current scope will be used

{:}

After compilation:

{:;}

 

(3) Mixins)

 

　　[1] Call an existing class

{:;}{:;}{}

After compilation:

{:;}{:;}{:;:;}

 

[2] mixing with parameters (or null parameters) will not be exposed to css after compilation

{:;}{:;}{}

After compilation (the CSS file has no mixed module code ):

{:;:;}

　　

[3] Set default parameters

{:;:;}{}

After compilation:

{:;:;}

 

[4] Parameters

(1) multiple parameters can be separated by semicolons (;) or commas (,). We recommend that you use semicolons (;) to separate multiple parameters, it can also represent the delimiter of a group of values in a parameter.

(2) If at least one Semicolon is found in the mixed definition or call, it is assumed that the parameters are separated by semicolons, and all the commas are the delimiters of values in the parameters.

{:;:;}{}

After compilation:

{:;:;}　　

(3)... @ arguments get all parameter values

{:;:;:;:;:;    }{}

After compilation:

{:;:;:;:;:;}

 

[5] a mix of the same name will not be overwritten, and both will be called

{:;}{:;}{}

After compilation:

{:;:;}

 

[6] matching

(1) match by parameter quantity

{:;}{:;}{:;:;}{}

After compilation:

{:;}

 

(

{:;}{:;}{}

After compilation:

{:;}

 

【

{:;}{:;}{}

 

After compilation:

{:;}

 

(2) multiple conditions separated by commas: match one of them

{:;}{}{}

After compilation:

{:;}{:;}

 

Multi-condition, use

{:;}{}{}

After compilation:

{:;}

 

(4) Recursion

Self-calling (recursion) in the defined hybrid Module)

Example of loop output

{}{:;    }{}

After compilation:

{:;}{:;}{:;}{:;}{:;}

 

(5) Scope

The scope is similar to that of other programming languages. First, variables or mixed modules are searched locally. If not found, the variables are searched in the parent scope, increasing progressively until they are found. Otherwise, an error is reported.

{:;:;}

After compilation:

{:;}

 

(6) namespace

　　For better organization

{:;    }{}

After compilation:

{:;}

 

(7) Notes

/*

//

 

(8) Import (

(2) embed a css file

 

(8) Avoid Compilation

　　If you need to output some incorrect

To output such a value, we can add

 

{:;} 

Errors during compilation

Therefore, you need to use the syntax to avoid compilation.

{:;}

Avoid compilation and support inserting string values

{:;:}

After compilation:

{:;:;}

 

Conclusion: The above is only the tip of the iceberg of less knowledge, more please pay attention to the official website http://www.lesscss.net/article/home.html

The next chapter describes less code tracking and debugging.