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檔案,內容為: