初探 Less 與監控工具 deadsimple-less-watch-compiler

Author Avatar
Yish 12月 14, 2016
  • 在其他設備中閱讀本文章

下午決定好好的來學習 css 的預處理器,之後會再規劃時間來看看 scss or sass,如果對預處理器有所不了解的部分可以自己找一些資料來看,會想學的原因是先前自己在寫 css 的時候維護起來真的很難,顏色還沒辦法提取出來,不過聽說新版的 css 可以提取了,但觀念應該是一樣的,以下是我的筆記:

官方網站

安裝 less

1
$ (sudo) npm install -g less

就這樣,實在太方便了

使用方法

看編譯後結果(沒有編譯)

1
$ lessc styles.less

編譯成指定檔案

1
$ lessc styles.less styles.css

但每改一次都要自己去編譯是蠻麻煩的,剛好有大大寫出不錯的監控套件:
deadsimple-less-watch-compiler

1
$ (sudo) npm install -g less-watch-compiler

假設你的 less 檔案剛好放在 folder 底下:

1
$ less-watch-compiler . .

他就會監控 less 檔案,如果有發生變化就會自動編譯,相當方便

如果說你在 less 當中有使用到 @import 例如把 less 檔案放在 src folder 當中,你可以這樣寫:

1
$ less-watch-compiler src dist main.less

他會去監控在 src 的 main.less(他裡面有 @import 其他 less)發生變化時就會把檔案編譯到 dist folder 當中。

蠻簡單好用的工具,可以試試看。