1. Less介紹

Less是CSS預(yù)處理語言，可以使用變量、嵌套、運算等，便于維護項目CSS樣式代碼。

2. 安裝

2.1 部署node.js環(huán)境

官網(wǎng)地址：https://nodejs.org/en/download，軟件安裝好后，CMD命令窗口輸入node -v和npm -v，分別跳出版本號，說明node.js環(huán)境安裝成功。

2.2 安裝Less

采用npm包管理工具，全局安裝Less包

less安裝好了，lessc也安裝好了

lessc命令是可以把less文件轉(zhuǎn)成css文件

2.3 WebStorm配置Less

目的：編輯器自動把less文件轉(zhuǎn)成css文件

我這邊采用WebStorm編輯器。WebStorm左上角-->files-->Settings-->Tools-->File Watchers-->點擊添加

lessc路徑可以通過where lessc命令得到

css導(dǎo)出參數(shù)

3. Less語法

3.1 變量

變量可以當(dāng)做普通的變量、選擇器變量、屬性變量、URL變量、聲明變量來使用。

變量定義語法：

變量使用語法：

變量的作用域

和js中變量的作用域一致

普通變量

less：

編譯后的css：

選擇器變量

less：

解釋：

變量作為選擇器變量時，變量使用需要加花括號：@{變量名}

編譯后的css：

屬性變量

less：

解釋：

變量作為屬性變量時，變量使用需要加花括號：@{變量名}

編譯后的css：

URL變量

less：

解釋：

變量作為URL變量時，變量使用需要加花括號：@{變量名}

編譯后的css：

聲明變量

less：

編譯后的css：

3.2 嵌套

按照頁面的層級結(jié)構(gòu)來定義css

&能指代外層選擇器的作用

根據(jù)上面HTML結(jié)構(gòu)嵌套寫樣式

less：

翻譯后的css：

分析：

對比less和翻譯后的css，less結(jié)構(gòu)清晰，更容易進行css樣式的維護

3.3 運算

• 在less文件中，任何數(shù)字、顏色或變量都能參與加減乘除運算

• 對于兩個不同單位值之間的運算，運算結(jié)果的值會取左邊值的單位

• 兩個值之間只有一個值有單位，則運算結(jié)果就取該單位

加

less：

翻譯后的css：

減

less：

翻譯后的css：

乘

less：

翻譯后的css：

除

less：

翻譯后的css：

小結(jié)：

開發(fā)中，本人應(yīng)用Less的變量、嵌套、運算比較多。其它繼承、導(dǎo)入、條件表達式、函數(shù)、混合方法等用的少，就不去整理了，用到的時候再看資料了。