less語法和使用

　　常見CSS預處理器：Less / SASS / Stylus等。

Less預處理器：使用CSS語法，能夠作一些邏輯處理，可使用變量、混合、運算、嵌套等。簡化CSS的編寫，下降了CSS等維護成本。

---

 

1. 安裝及使用

1）VSCode插件（推薦）

在VSCode中安裝插件Easy LESS。能夠自動把less文件轉換成css文件，保存less文件後自動更新。

2）Node

安裝Node環境：（Mac版）

• 檢測Node是否安裝成功

在終端中輸入：

node -v          node環境是否安裝成功(若是安裝成功,會出現版本號)

npm -v           檢測包管理工具是否安裝成功(若是安裝成功,會出現版本號)

• 安裝less

在終端輸入：

npm install less -g

• 驗證less是否安裝成功

lessc -v

• 將less編譯爲css文件

在終端輸入：

（首先要進入到當前less文件所在的文件夾目錄中）

編譯less文件cmd命令: lessc 要被編譯的less文件 要編譯爲自定義CSS文件

例如:  lessc  index.less  index.css

 

2. Less

1）使用

less文件中能夠寫css代碼。

語法：@變量名: 值;

調用：@變量名

1 @fsize: 18px; //把18px存在@fsize記號中 2 div {
3  font-size: @fsize; //調用 4 }

 

2）運算

運算符號：+ - * /

1 @w:120px; 2 div {
3  width: @w / 2;
4 }

 

3）嵌套

less中樣式能夠嵌套，保存後會自動生成css代碼。

 1 div {
 2  width: 120px;
 3  height: 120px;
 4  a {  5  width: 100%;
 6  height: 100%;
 7  display: block ;
 8  span {  9  font-size:18px;
10     }
11  } 12 }

生成的css代碼：

 1 div {
 2  width: 120px;
 3  height: 120px;
 4 }
 5 div a {
 6  width: 100%;
 7  height: 100%;
 8  display: block ;
 9 }
10 div a span {
11  font-size: 18px;
12 }

 

4）混合（函數的使用）

定義函數：把一段相同的代碼交給一個函數來管理

 1 .public() { //定義函數  2  width: 400px;
 3  height: 500px;
 4  background: red;
 5 }
 6 div {
 7  .public(); // 調用函數  8 }
 9 p {
10  .public(); 11 }

.public(); 也能夠換成 #public();，但後面調用也要用 #public();

 

傳參數：

.public(@w) { }   // 小括號中的@w至關於假設有了具體的值

 1 //@w 表示假設的寬度, @h 表示假設的高度  2 .public(@w,@h) {
 3  width:@w;
 4  height: @h;
 5  background: red;
 6 }
 7 div {
 8  .public(600px,300px); // 調用  9 }
10 p {
11  .public(400px,100px); 12 }

參數的順序 和 調用的實際值 是一一對應的。

 

函數參數的默認值：.public(@w:默認值,@h:默認值...){}

 1 .public(@w:400px,@h:400px) {
 2  width:@w;
 3  height: @h;
 4  background: red;
 5 }
 6 div {
 7  .public(600px,300px); // 調用，寬高爲600px，300px  8 }
 9 p {
10  .public(); //沒有傳參，寬高爲默認的400px，400px 11 }

 

5）引入less文件

1   <!-- 引入less文件 -->
2   <link rel="stylesheet/less" type="text/less" href="./08-index.less">
3   <!-- 引入js文件 -->
4   <script src="./less.js"></script>

js文件要放在less文件後面。

在本地運行沒有效果。 （如：file:///C:/Users...）

在服務器上運行纔能有效果。（如http://ip地址....）

 

安裝服務器：在vscode→ 搜索插件live sever→ 安裝→ 重啓vscode→ 在html頁面→鼠標右鍵點擊→ open width live server