This time I will bring you a detailed explanation of the installation and use steps of Less. What are the precautions for Less installation and use? The following is a practical case, let’s take a look.
node.js installationOfficial 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>
#box{ width:200px; height:200px; background-color:blue; ul{ color:white; li{ line-height:50px; } } }
is as follows:
https:// less.bootcss.com/
Variables@red:red; @w:200px; #big{ width:@w; height:@w; background-color:@red; #small{ width:@w; height:@w; background-color:@red; } } p{ color:@red; }
.bt{ width:200px; height:200px; border-top:2px solid red; background-color:red; } #big{ .bt; #small{ .bt; } }
#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; } } }
@color:#333; #box{ width:100%; height:60px; background-color:@color+#111; } •calc() @var:50vh/2; #box{ width:calc(50% + (@var - 20px)); }
@base:#f04615; @width:0.5; #box{ width:percentage(@width); color:saturate(@base,5%); background-color:spin(lighten(@base,25%),8); }
//单行注释// /*多行 注释*/ •引入其他less文件 @import "other.less";
What BUGs and errors often occur in JS
How to view personal information and change password in vue
The above is the detailed content of Detailed explanation of Less installation and usage steps. For more information, please follow other related articles on the PHP Chinese website!