Home > Article > Web Front-end > Detailed explanation of installation and use of Less
This time I will bring you a detailed explanation of the installation and use of Less. What are the precautions for the installation and use of Less? The following is a practical case, let’s take a look.
node.js is a front-end framework that comes with a package management tool npm
node.js installation
Official website: http://nodejs.cn/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css" rel="external nofollow" /> </head> <body> <p id="box"> <ul> <li>你好</li> <li>hello</li> </ul> </p> </body> </html>style.less
#box{
width:200px;
height:200px;
background-color:blue;
ul{
color:white;
li{
line-height:50px;
}
}
}Enter lessc xxx.less xxx.css in the command line, is as follows:
https://less.bootcss.com/
Variable@red:red;
@w:200px;
#big{
width:@w;
height:@w;
background-color:@red;
#small{
width:@w;
height:@w;
background-color:@red;
}
}
p{
color:@red;
}Mixing
.bt{
width:200px;
height:200px;
border-top:2px solid red;
background-color:red;
}
#big{
.bt;
#small{
.bt;
}
}•Nesting
#box{
width:100%;
height:60px;
background-color:#ccc;
h3{
width:100%;
height:20px;
background-color:yellow;
}
ul{
list-style:none;
li{
height:40px;
line-height:40px;
float:left;
padding:0 10px;
}
}
}•Operation
@color:#333;
#box{
width:100%;
height:60px;
background-color:@color+#111;
}
•calc()
@var:50vh/2;
#box{
width:calc(50% + (@var - 20px));
}•Fixed function
@base:#f04615;
@width:0.5;
#box{
width:percentage(@width);
color:saturate(@base,5%);
background-color:spin(lighten(@base,25%),8);
}•Comments
//单行注释// /*多行 注释*/ •引入其他less文件 @import "other.less";I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website! Recommended reading:
Detailed explanation of the use of Node debugging tools
Summary of common knowledge points in vue practical projects
The above is the detailed content of Detailed explanation of installation and use of Less. For more information, please follow other related articles on the PHP Chinese website!