Introduction to methods using less (variables, blends, matches, operations, nesting)

How to use less and some common (variables, mixes, matches, operations, nesting)

Less introduction and compilation tools

What is less

1.LESSCSS is a dynamic style language, which is a kind of CSS preprocessing language, it uses CSS-like syntax, for CSS to give the characteristics of dynamic language, such as variables, inheritance, operations, functions, and more convenient to write and maintain CSS.
Lesscss can be used in multiple languages and environments, including browser-side, desktop client, and server-side.

Less's compilation tool

1. Koala Koala--compile when the CSS folder is not built Koala will automatically generate a
   How to set the language
   
   How to compile
   -

2. Let Webstorm support less compile:

• Install node. JS---This is a package management tool that will be used later

• Win+r

• Enter NPM install less

3. .....

The syntax of less

Ps: The following knowledge points will be used in the above knowledge points (for example, in the mix will use the variable to deepen the impression ^_^)

2. Comments

• Show only in less
  

• /**/will be displayed in the compiled CSS file.

4. Variable

• The notation in less

  @ly_width: 100px;. box {width: @ly_width;}

• After compiling, the CSS is displayed in the

  . box {width:100px;}

• Define variables with @

6. Mixed

• Resolve Border-radius Compatibility

  . Border_radius (@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius ;-o-border-radius: @radius; Border-radius: @radius;}

• The notation in less

  @ly_width: 100px; @ly_height: 200px; @ly_color: Green;. Border (@border_width: 3px;) {border: @border_width solid red;}. One {width: @ly_width; height: @ly_height; background-color: @ly_color;. Border ();}

• After compiling, the CSS is displayed in the

  . One {width:100px;height:200px;background-color: #008000; border:3px solid #ff0000;}

• The notation in less

  @ly_width: 100px; @ly_height: 200px; @ly_color: Green;. Border (@border_width) {border: @border_width solid red;}. One {width: @ly_width; height: @ly_height; background-color: @ly_color;. Border (1px);}

• After compiling, the CSS is displayed in the

  . One {width:100px;height:200px;background-color: #008000; border:1px solid #ff0000;}

• What if you want to apply the. Border style to the. One in the code first?

  @ly_width: 100px; @ly_height: 200px; @ly_color: Green;. Border {border:1px solid red;}. One {width: @ly_width; height: @ly_height; background-color: @ly_color;}

• Write it down like this.

  @ly_width: 100px; @ly_height: 200px; @ly_color: Green;. Border {border:1px solid red;}. One {width: @ly_width; height: @ly_height; background-color: @ly_color;. border;}

• After compiling, the CSS is displayed in the
  .border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

• Blending without parameters

• Mixed---with parameters without a default (multiple parameters can be passed, separated by commas or semicolons, the following is recommended as an example of a parameter)

• Mixed---with parameters with default values (you can pass multiple parameters below with one argument as an example)

• Often used when solving CSS3 compatibility

8. Matching mode

• Less syntax

  //defined, bottom, left, The style of the right border. border (top; @border_width: 5px; @border_color: red) {border-top: @border_width solid @border_color;}. border (bottom; @border_width: 5px; @border_color: red) {border-bottom: @border_width solid @border_color;}. Border (left; @border_width: 5px; @border_color: red) {border-left: @border_width solid @border_color;}. Border (right; @border_width: 5px; @border_color: red) {border-right: @border_width solid @border_color;} If you want to write a generic style you can write in the following code in the format is fixed. border (@_, @border_width: 5px; @border_color: red) {Border-color:yellow;}. BORDER_USE1 {//select and if is almost if left to call the corresponding. border (left);}.
   BORDER_USE2 {//select and if is almost if right, call the corresponding. border above;} 

• is displayed in the CSS after compiling

  .border_use1 {border-left:5px solid #ff0000; Border-color:yellow;}.
  BORDER_USE2 {border-right:5px solid #ff0000; border-color:yellow;} 

• It can be understood that if and the above mix are somewhat similar

10. Operation

• The notation in less

  @ly_width: 100px;. One {width: @ly_widht + 100;}

• After compiling, the CSS is displayed in the

  . one {width:200px;}

• Operations provide the addition, subtraction, multiplication, except operation, can also do the property value and color of the operation ...

12. Nesting

• HTML structure

  <p class= "One" ><p class= "one" ></p></p>

• The notation in less

  @ly_width: 100px; @ly_height: 200px; @ly_color: red;. One {width: @ly_width; height: @ly_height; background-color: @ly_color;. both {    background-color:green;}}

• After compiling, the CSS is displayed in the

  . One {width:100px;height:200px;background-color: #ff0000;}. One. {  background-color:green;}

• You can nest another selector in one selector, and the code looks hierarchical, improving code maintainability

14. @arguments variables

• The notation in less

  Raise a chestnut with the mixture mentioned earlier  . border (@border_width; @border_style; @border_color) {border: @arguments;}. One {. border (1px;solid;red);}

• After compiling, the CSS is displayed in the

  . One {border:1px solid #ff0000;}

• Can contain all the variables and handle the variables together