1. 程式人生 > >less編譯工具——koala使用介紹

less編譯工具——koala使用介紹

選項 ref 編輯器 koa 9.png logs images nbsp 最新

   

  1:使用koala編譯軟件

    官網:http://koala-app.com/index-zh.html (目前官網點擊下載沒有反應,有人說可能是網絡問題,但真正的原因是需要FQ才能下載了)

    百度網盤:https://pan.baidu.com/s/1dEYL3Df 密碼: ywx5 (這裏提供一個koala 2.0.4的安裝包)

   安裝完,雙擊koala圖標,會彈出如下圖所示界面,箭頭所指是你項目需要編譯的less文件

   技術分享

這裏需要註意的是,要鼠標右鍵需要編譯的less文件,然後設置文件路徑(就是你需要編譯的less文件所在路徑),如下圖:

技術分享

   然後鼠標左鍵點擊less文件,會彈出下圖所示右邊的編譯界面。這裏默認自動編譯,然後選擇normal,在點擊執行編譯即可

   技術分享

編譯成功後會有成功提示,如下圖:(編譯成功以後,你的項目文件裏除了less文件,就會多一個與less文件名相同的css文件)

   技術分享

  

當然這裏除了normal選項,也是可以選擇compress選項的,它們的區別在於,normal不會把編譯less文件後的css文件格式化,compress則會格式化,如下圖:

技術分享

這樣開發的時不候不太方便,所以建議還是選擇normal

註:因為此版本不是最新版,所以打開該編譯軟件的時候會彈出到官網升級的提示,直接關掉即可,當然如果你可以FQ的話,請無視(23333)

技術分享

補充說明:

如果你用的是Hublider編輯器,可以不用koala編譯,Hublider自帶編譯less插件。如下圖:

個人覺得Hubilder自帶的編譯less插件更好用,你只需要在新建的less文件裏面隨便寫一個樣式,然後保存,就會自動生成一個同名的css文件。

之後你只需要修改less文件裏的樣式代碼,然後保存。同名css文件會自動同步更新並解析。

技術分享

技術分享

   

less編譯工具——koala使用介紹