1. 程式人生 > >關於Sublime text 3如何編輯less並轉(編譯)成css檔案,親測可用

關於Sublime text 3如何編輯less並轉(編譯)成css檔案,親測可用

今天開始學習使用less這個強大方便的前端工具,本來是考慮用koala(專門編輯less的軟體)來使用less的,但是發現sublime編輯器也可以實現對less的編譯及高亮顯示程式碼,這樣既能少用一個軟體還能擴充套件sublime的功能,何樂而不為,於是趕緊去網上查了資料並加以整理。

1、在sublime裡安裝好less(less語法高亮功能外掛)和Less2Css(編譯功能外掛)這兩個外掛,具體步驟為:

Ctrl+Shift+p開啟命令面板,輸入install package並在下拉里選中install package(這裡必須已經安裝好了管理外掛的package control外掛),彈出新搜尋框之後再輸入要安裝的外掛,然後下拉出現對應外掛,點選安裝。

2、安裝好外掛後還不能編譯,必須還要安裝好node.js才行

下載傳送門:Node.js,必須保證系統中已經安裝了nodejs並且路徑已經新增到環境變數裡面,一般安裝好之後就已經自動新增到系統環境變數Path裡,不過最好開啟確認一下,開啟方法:右鍵計算機->屬性->環境變數->在系統變數裡找到Path,然後選擇下面的編輯按鈕,裡面的變數值就是

系統環境變數:


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 -g less-plugin-clean-css,安裝好之後問題就解決了

使用方法:在sublime中新建一個less檔案,按Ctrl+s就會根據當前檔案編譯為一個css檔案,這個新建的檔案預設放在less檔案同目錄下,之後每次編輯完less檔案之後Ctrl+s儲存,同目錄下的css檔案也會同步更新內容。

好了,這樣就可以開始在sublime上愉快的編輯less啦~



文/沒個性的七秒魚(簡書作者)
原文連結:http://www.jianshu.com/p/1ebf12edc967
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。