Compilation tools, which can automatically compile using the easy less plug-in in vs code
The generated css files are in the same directory as less files by default. https://blog.csdn.net/mcYang0929/article/details/81703050
-
Declare variables, easy to maintain
-
Hybrid grammar, reusable style
Compiled css file
-
Mixed grammar with parameters, which can be easily extended while reusing styles
Hybrid syntax, parameter default with value
-
Matching mode
-
Style ID "@" on default
Use
-
Nested grammar
Write the sub-label style directly in the parent label style. less compiles and automatically generates nested defined styles for us.
Use the - symbol to jump to the next level of style, you can use this method to write pseudo class style, use inside a - that is, jump to a label, and then define pseudo class.
Pseudo-elements in less are written in the same way as pseudo-classes, using nested grammar
less file
@charset 'utf-8';
@Height:300px;
//You can add default values in the parameters. If you don't add default values, you can pass in parameter variables directly. Note that commas are used to connect multiple parameters. If you don't add default values, you must pass in parameters.
.container(@Width:200px){
background-color: gray;
width: @Width;
height: @Height;
}
.useContainer{
//Parallel slash comment, not compiled and displayed in css file
/*Notes displayed in the css file*/
//Mixed grammar, which calls style in style, can also be used to call the style that needs to be passed parameters (in html can not call the style that needs to be passed parameters, use this way to call indirectly)
//The mixed grammar with parameters not only facilitates the reuse of styles, but also extends the original styles.
.container();//Default width 200px
.container(100px);//Overlay, shown as width 100px
}
//Matching mode
.setBorder(top,@Width:2px,@Color:red){
border-top: @Width solid @Color
}
.setBorder(bottom,@Width:2px,@Color:red){
border-bottom: @Width solid @Color
}
//The default pattern in the matching pattern
.setBorder(@_,@Width:2px,@Color:red,@backgroundColor:yellow){
//New parameters are allowed to be passed in the style on the default band, but only parameters with default values are allowed, because parameters that are different from the matching pattern above cannot be passed in when invoked.
//That is to say, the style on the default band should be consistent with that in the matching mode, and the redundant parameters need to have default values.
width: 100px;
height: 100px;
background-color: @backgroundColor;
}
.useTopBorder{
.setBorder(top,10px,red);//Use matching patterns to find the corresponding style
}
.father{
h3{
color: red;
font-size: 20px;
}
span{
color: yellow;
font-size: 14px;
}
}Compiled css file
@charset 'utf-8';
.useContainer {
/*Notes displayed in the css file*/
width: 200px;
background-color: gray;
width: 100px;
height: 300px;
}
.useTopBorder {
border-top: 10px solid red;
width: 100px;
height: 100px;
background-color: yellow;
}
.father h3 {
color: red;
font-size: 20px;
}
.father span {
color: yellow;
font-size: 14px;
}
Reference link: less grammatical summary