This time I will show you how to install and use Less, and what are the precautions for installing and using 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 npmnode.js installationOfficial website: http://nodejs.cn/#Verify on the command line whether the installation is successful
Switched to the project directory and initialized a package.json file
Installation and uninstallation of jQuery package (example) Installation
Uninstall
Install Taobao image
2. Installation less
Try it:
test.html
<!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:
Open test.html with a browser and take a look Effect bar 3. Basic usage of less
https://@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:
How to use call and apply in JSWhat are the ways to automate vue formsThe above is the detailed content of How to install and use Less. For more information, please follow other related articles on the PHP Chinese website!