Less概述
- Less是一門CSS擴展語言，也稱爲CSS預處理器。
- Less作爲CSS的一種形式的擴展，它並沒有減少CSS的功能，而是在現有的CSS語法上，爲CSS加入了程序式語言的特性，包括：引入了變量、Mixin（混入）、運算以及函數等功能，大大簡化了CSS的編寫，降低了CSS的維護成本。
- 常見的CSS預處理器有：Sass、Less、Stylus。
- 使用Less之前需要先安裝Less，Less的安裝步驟如下：（1）先安裝node.js；（2）基於安裝的node.js，使用命令“npm install -g less”進行Less的安裝。
Less的使用
1.Less變量
Less變臉的語法格式如下：
@變量名:值;
變量名的命名規範：
1、必須以@爲前綴；
2、不能包含特殊字符；
3、不能以數字開頭；
4、大小寫敏感
2.Less編譯
- Less包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的CSS文件。
- VSCode的Easy LESS插件可以把Less文件編譯爲CSS文件，只需安裝並重新啓動VSCode編輯器就可以實現對Less文件的編譯。
3.Less嵌套
- 子元素的樣式直接寫到父元素裏面，如果內層選擇器的前面沒有&符號，則被解析爲父選擇器的後代。
css樣式：
#header .logo {
width: 300px;
}
less嵌套樣式：
#header {
.logo {
width:300px;
}
}
- 子元素的樣式直接寫到父元素裏面，如果內層選擇器的前面有&符號，則被解析爲父元素自身或父元素的僞類。（也就是說，如果內層選擇器要使用到僞類選擇器（:hover）、僞元素選擇器（::after）、交集選擇器（交集選擇器只能交2個，其中第1個是標記，第2個是類選擇器或者ID選擇器，之間不能有空格，形如：h2.special），那麼內層選擇器的前面就需要添加&符號。
css樣式：
a:hover {
color: red;
}
less嵌套樣式：
a {
&:hover {
color: red;
}
}
4.Less運算
- 任何數字、顏色（帶有數字）或者變量都可以參與運算。
- Less提供了加（+）、減（-）、乘（*）、除（/）和括號輔助運算。
- 運算符中間左右有個空格隔開，如：5px + 5。
- 對於兩個值之間只有一個值有單位，則運算結果取該單位。
- 對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位。
微信公衆號也會定期更新，覺得文章寫得還可以的，可以加個關注！點個贊！謝謝！
