一、維護(hù) css 的弊端
CSS 是一門非程序式語言，沒有變量、函數(shù)、SCOPE（作用域）等概念。
- CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的。
- 不方便維護(hù)及擴(kuò)展，不利于復(fù)用。
- CSS 沒有很好的計算能力
- 非前端開發(fā)工程師來講，往往會因為缺少 CSS 編寫經(jīng)驗而很難寫出組織良好且易于維護(hù)的 CSS 代碼項目。
二、Less介紹
Less （Leaner Style Sheets 的縮寫） 是一門 CSS 擴(kuò)展語言，也成為CSS預(yù)處理器。
- 做為 CSS 的一種形式的擴(kuò)展，它并沒有減少 CSS 的功能，而是在現(xiàn)有的 CSS 語法上，為CSS加入程序式語言的特性。
- 它在 CSS 的語法基礎(chǔ)之上，引入了變量，Mixin（混入），運算以及函數(shù)等功能，大大簡化了 CSS 的編寫，并且
- 降低了 CSS 的維護(hù)成本，就像它的名稱所說的那樣，Less 可以讓我們用更少的代碼做更多的事情
Less中文網(wǎng)址： http://Lesscss.cn/
常見的CSS預(yù)處理器：Sass、Less、Stylus
一句話：Less 是一門 CSS 預(yù)處理語言，它擴(kuò)展了CSS的動態(tài)特性。
三、Less安裝
① 安裝nodejs，可選擇版本(8.0)，網(wǎng)址：http://nodejs.cn/download/
② 檢查是否安裝成功，使用cmd命令（win10 是 window +r 打開 運行輸入cmd） --- 輸入“ node –v ”查看版本即可
③ 基于nodejs在線安裝Less，使用cmd命令“ npm install -g Less ”即可
④ 檢查是否安裝成功，使用cmd命令“ Lessc -v ”查看版本即可
四、Less使用：
4.1 Less變量
變量是指沒有固定的值，可以改變的。因為我們CSS中的一些顏色和數(shù)值等經(jīng)常使用。
@變量名：值；
1.變量命名規(guī)范：
- 必須有@為前綴
- 不能包含特殊字符
- 不能以數(shù)字開頭
- 大小寫敏感
@color: pink;
2. 變量使用規(guī)范：
//直接使用
body{
color:@color;
}
a:hover{
color:@color;
}
4.2 Less編譯（重點）
- 本質(zhì)上，Less 包含一套自定義的語法及一個解析器，用戶根據(jù)這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會通過解析器，編譯生成對應(yīng)的 CSS 文件。
- 所以，我們需要把我們的 less文件，編譯生成為css文件，這樣我們的html頁面才能使用。
vocode Less 插件使用：
- Easy LESS 插件用來把less文件編譯為css文件
- 安裝完畢插件，重新加載下 vscode。
- 只要保存一下Less文件，會自動生成CSS文件。
4.3 Less嵌套
如果碰到（交集|偽類|偽元素選擇器）
- 內(nèi)層選擇器的前面沒有 & 符號，則它被解析為父選擇器的后代；
- 如果有 & 符號，它就被解析為父元素自身或父元素的偽類。
a{
&:hover{
color:red;
}
}
4.4 Less運算（重點）
任何數(shù)字、顏色或者變量都可以參與運算。就是Less提供了加（+）、減（-）、乘（*）、除（/）算術(shù)運算。
/*Less 里面寫*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至還可以這樣 */
width: (@width + 5) * 2;
注意：
- 乘號（*）和除號（/）的寫法
- 運算符中間左右有個空格隔開 1px + 5
- 對于兩個不同的單位的值之間的運算，運算結(jié)果的值取第一個值的單位
- 如果兩個值之間只有一個值有單位，則運算結(jié)果就取該單位
