今天開始學習使用less這個強大方便的前端工具酿雪,本來是考慮用koala(專門編輯less的軟件)來使用less的遏暴,但是發(fā)現(xiàn)sublime編輯器也可以實現(xiàn)對less的編譯及高亮顯示代碼,這樣既能少用一個軟件還能擴展sublime的功能指黎,何樂而不為朋凉,于是趕緊去網上查了資料并加以整理。
1醋安、在sublime里安裝好less(less語法高亮功能插件)和Less2Css(編譯功能插件)這兩個插件杂彭,具體步驟為:
Ctrl+Shift+p打開命令面板,輸入install package并在下拉里選中install package(這里必須已經安裝好了管理插件的package control插件)吓揪,彈出新搜索框之后再輸入要安裝的插件亲怠,然后下拉出現(xiàn)對應插件,點擊安裝柠辞。
2团秽、安裝好插件后還不能編譯,必須還要安裝好node.js才行
下載傳送門:Node.js叭首,必須保證系統(tǒng)中已經安裝了nodejs并且路徑已經添加到環(huán)境變量里面习勤,一般安裝好之后就已經自動添加到系統(tǒng)環(huán)境變量Path里,不過最好打開確認一下焙格,打開方法:右鍵計算機->屬性->環(huán)境變量->在系統(tǒng)變量里找到Path图毕,然后選擇下面的編輯按鈕,里面的變量值就是
系統(tǒng)環(huán)境變量:
3眷唉、安裝less
在cmd 下輸入命令:npm install -g less吴旋,安裝好之后在 Sublime 里面Ctrl+n新建less文件時损肛,會有一個錯誤:LESS: Unable to interpret argument clean-css,這是因為還需要一個插件:less-plugin-clean-css插件的安裝荣瑟,同樣在cmd下輸入命令:npm install less-plugin-clean-css治拿,安裝好之后問題就解決了。
使用方法:在sublime中新建一個less文件笆焰,按Ctrl+s就會根據當前文件編譯為一個css文件劫谅,這個新建的文件默認放在less文件同目錄下,之后每次編輯完less文件之后Ctrl+s保存嚷掠,同目錄下的css文件也會同步更新內容捏检。
好了,這樣就可以開始在sublime上愉快的編輯less啦~