less的安裝與用法

時間 2019-11-19

標籤安裝用法简体版

原文原文鏈接

1. node.js

node.js是一個前端的框架自帶一個包管理工具npmcss

node.js 的安裝

官網：http://nodejs.cn/html

在命令行檢驗是否安裝成功
打開cmd
切換到項目目錄，初始化了一個package.json文件
安裝與卸載jQuery包（例子）
- 　　安裝
- 　　卸載
- 安裝淘寶鏡像

2. 安裝less

試一試：

demo.html前端

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="style.css"/>
 7 </head>
 8 <body>
 9 <div id="box">
10     <ul>
11         <li>你好</li>
12         <li>hello</li>
13     </ul>
14 </div>
15 </body>
16 </html>

style.lessnode

 1 #box{
 2   width:200px;
 3   height:200px;
 4   background-color:blue;
 5   ul{
 6     color:white;
 7     li{
 8       line-height:50px;
 9     }
10   }
11 }

在命令行中輸入lessc xxx.less xxx.css，以下：

用瀏覽器打開test.html 看一下效果吧npm

3. less 的基本用法

https://less.bootcss.com/json

變量

 1 @red:red;
 2 @w:200px;
 3 #big{
 4     width:@w;
 5     height:@w;
 6     background-color:@red;
 7     #small{
 8         width:@w;
 9         height:@w;
10         background-color:@red;
11     }
12 }
13 p{
14     color:@red;
15 }

混合

 1 .bt{
 2     width:200px;
 3     height:200px;
 4     border-top:2px solid red;
 5     background-color:red;
 6 }
 7 #big{
 8     .bt;
 9     #small{
10         .bt;
11     }
12 }

嵌套

 1 #box{
 2     width:100%;
 3     height:60px;
 4     background-color:#ccc;
 5     h3{
 6         width:100%;
 7         height:20px;
 8         background-color:yellow;
 9     }
10     ul{
11         list-style:none;     
12         li{
13             height:40px;
14             line-height:40px;
15             float:left;
16             padding:0 10px;
17         }
18     }
19 }

運算

1 @color:#333;
2 #box{
3     width:100%;
4     height:60px;
5     background-color:@color+#111;
6 }

calc()

@var:50vh/2;
#box{
    width:calc(50% + (@var - 20px));
}

固定函數

1 @base:#f04615;
2 @width:0.5;
3 #box{
4     width:percentage(@width);
5     color:saturate(@base,5%);
6     background-color:spin(lighten(@base,25%),8);
7 }

註釋

 1 //單行註釋//
 2 /*多行
 3   註釋*/
 4 
 5 //  @base:#f04615;   
 6 
 7 /* @width:0.5;
 8 #box{
 9     width:percentage(@width);
10     color:saturate(@base,5%);
11     background-color:spin(lighten(@base,25%),8);
12 } 
13 */

引入其餘less文件
```
@import "other.less";
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。