node.js是一個前端的框架 自帶一個包管理工具npm
node.js 的安裝
官網：http://nodejs.cn/
在命令行檢驗是否安裝成功
切換到項目目錄，初始化了一個package.json文件
安裝與卸載jQuery包（例子） 安裝
卸載
安裝淘寶鏡像
2. 安裝less
試一試：
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><div id="box"> <ul> <li>你好</li> <li>hello</li> </ul></div></body></html>
style.less
#box{ width:200px; height:200px; background-color:blue; ul{ color:white; li{ line-height:50px; } }}在命令行中輸入lessc xxx.less xxx.css，
如下：
用瀏覽器打開test.html 看一下效果吧3. less 的基本用法
https://less.bootcss.com/
變量
@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";
總結
以上所述是小編給大家介紹的Less安裝及基本用法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
