CSS進階-LESS(簡介)_less

LESS簡介

LESS 為 Web 開發人員帶來了福音，它在 CSS 的文法基礎之上，引入了變數，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，並且降低了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可以讓我們用更少的代碼做更多的事情。 LESS安裝（sublime）

安裝less2css外掛程式：
方法：ctrl+shift+p>install Package>輸入less2css按Enter

安裝less外掛程式
方法：ctrl+shift+p>install Package>輸入less按Enter

同時你還要安裝node.js可以參照菜鳥教程中的教程安裝（http://www.runoob.com/nodejs/nodejs-install-setup.html）

安裝less
cmd命令下分別輸入：
npm install -g less
npm install less-plugin-clean-css
提示安裝好後重啟sublime即可。

接下來我們就可以建一個簡單的less檔案來測試一下，less檔案的代碼如下：

div{    height: 100px;    width: 200px;    .border;}//基本混合.border{    border: 2px solid black;}//帶參數混合.border_02(@border_width){    border: @border_width solid black;}.border_02_test{    .border_02(10px);}//帶預設參數混合.border_03(@border_width:10px,@color:black){    border: @border_width solid @color;}.border_03_test1{    .border_03();}.border_03_test2{    .border_03(20px,red);}

按儲存後，在同一個檔案夾下會產生一個相應的css檔案，內容為：