less basic use

what is less

Less is a dynamic style language, which is a kind of CSS preprocessing language. It is similar to CSS syntax, and gives CSS the characteristics of dynamic language, such as variables, inheritance, operations, functions, etc., which is more convenient for CSS to write and maintain.

less compiler tool

I use the HBuilder compilation tool for front-end development, and the less compilation plugin is provided in HBuilder. Open tools--install plugins, there are less and scss compilation plugins, click to install;

Open the precompiler settings in the tool and click New: a The file suffix is: .less; b The trigger command address is the address where less.cmd is located. You can search for the file in your HBuilder installation directory and fill in the address D:\software\ HBUILDER\HBuilder_7.6.2\plugins\com.pandora.nodejs.thrift_1.0.0.201609081718\js\node_modules\.bin\lessc.cmd ;cCommand parameters: %FileName% %FileBaseName%.css

It's good to finalize it, and every time the less file is changed and saved, it will be automatically compiled.

use of less

l, directly refer to the css file

For example, less compiled index.css file <link rel="stylesheet" type="text/css" href="css/index.css"/>

2. Variables declared in less must start with @ For example: @variable name: value; @text-width: 300px;

3, mixins (mixing): Mixins is a way to reuse code. It's called a "Mixin in" mixin that allows us to mix one css style into another css style. Creating a mixin is as simple as including the styles to be mixed into the current style. Such as:

index.less:

.myStyle {  
  color: #333;  
  border: 1px solid gray;  
}  

#myDiv {  
  .myStyle  
}

index.css:

.myStyle {  
  color: #333;  
  border: 1px solid gray;  
}  
  
#myDiv {  
  color: #333;  
  border: 1px solid gray;  
}

4. Nesting

We can implement inheritance by nesting another selector in one selector, which greatly reduces the amount of code and makes the code look cleaner.

& represents its previous selector

index.less file

#myDiv {  
  background-color: black;  
  a {  
    color: red;  
  }  
    
  p {  
    color: white;  
  }  
}

index.css file

#myDiv {  
  background-color: black;  
}  
  
#myDiv a {  
  color: red;  
}  
  
#myDiv p {  
  color: white;  
}

5. Operation

Any number, color, or variable can participate in the operation, and the operation should be enclosed in parentheses.

@text-width:300px;
.mydiv {
    width:@text-width-20; //width is 280px
}

6. @arguments variable

@arguments contains all passed arguments.

7. !important keyword

Will add !important for all styles of the mix

8. Less files and css files can be introduced in the less file

@import "file name" //This is optional for importing less file suffixes;

@import(less)"filename.css"; //This is the suffix required for importing css files;

Guess you like