Less的安裝與配置


Less的安裝與配置

Less與Sass

先說一段題外話,很多初學者在選擇CSS 預處理語言不免會感到猶豫,作為CSS 的兩大預處理語言LessSass,各自都有着很廣泛的使用群體,我究竟該選哪個好呢?

經過了幾個項目的使用和對比,我最終還是選擇了Less。對我來說,我只想安安靜靜地寫寫CSS,雖然Sass結合Compass為我提供了循環、邏輯判斷語句以及大量的函數(Mixin),但到了實際的項目中,這些“花哨”的功能真就沒用過幾次。試想一下要你調一個按鈕:active時的顏色,你是直接通過Chrome審查元素去調,還是用lightendesaturate這些顏色操作函數一次一次地去試。實戰中用的最多的也就只有CSS選擇器的嵌套,與繼承,而這些Less也都為我提供了,使用起來也比Sass更方便。

Less的安裝與配置

1.通過koala

如果你是一個“高手”,酷愛記事本,那么koala一定很適合你。koala是一個前端預處理器語言圖形編譯工具,支持LessSass、Compass、CoffeeScript,幫助web開發者更高效地使用它們進行開發。跨平台運行,完美兼容windows、linux、mac。

koala

使用的時候直接將文件夾拖拽到Koala界面,即可添加項目。如項目目錄下有新增文件,點擊文件列表上方的刷新按鈕,將自動添加新文件。編輯完成保存后Koala就會為你自動編譯

2.使用WebStorm集成開發環境

WebStorm的配置過程稍微有點復雜。

1.安裝Node.JS

由於Less是使用JS開發的,所以Less運行時依賴Node.JS,如果你電腦之前沒有安裝過Node.JS,還需下載安裝Node.JS

node.js官網

安裝過程都是一路下一步。安裝完成后打開控制台輸入node -v,如果能顯示出版本號就說明,安裝成功了。

2.替換淘寶鏡像 CNPM

由於長城牌防火牆的原因,可能NPM(Node.js的包管理工具)無法訪問到服務器,這時就可替換成淘寶的NPM鏡像

打開控制台直接輸入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
MAC平台前面還需加一個sodo

3.安裝Less

打開控制台直接輸入:
cnpm install -g less
接着輸入lessc -v能看到版本號就表示安裝成功了

4.添加File Watchers

打開WebStorm,點擊文件—>設置—>File Watchers—>右邊的+

Less配置

program:你Node安裝路徑下的lessc.cmd
arguments:--no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$ 
working directory:$FileDir$
output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

之后你只要在項目中添加一個.less文件,系統就會自動為你編譯了。

3.配置Autoprefixer

以前用Sass,一個最主要的原因就是煩人的CSS廠商前綴,有了Autoprefixer你就再也不用為這些瑣事而發愁了。

Autoprefixer是一個后處理程序,不象Sass以及Stylus之類的預處理器。它適用於普通的CSS,可以實現css3代碼自動補全。也可以輕松跟Sass,LESS及Stylus集成,在CSS編譯前或編譯后運行。詳情見,https://github.com/postcss/autoprefixer

當Autoprefixer添加前綴到你的CSS,還不會忘記修復語法差異。這種方式,CSS是基於最新W3C規范產生

1.安裝Autoprefixer

打開控制台直接輸入:
cnpm install autoprefixer -g
安裝完后接着輸入:
cnpm install postcss-cli -g

2.配置External Tools

打開Webstorm 文件 -> 設置 -> 外部工具 點擊新增按鈕,如圖:

添加Autoprefixer

填寫具體配置,例如我的配置,如圖:

Autoprefixer配置信息

Program:填入你的postcss.cmd 的PATH;(一般在node安裝目錄下)
Parameters: -u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$ 
Working directory :$ProjectFileDir$

配置好后,你可以在css,或less文件中右擊,就可以在右鍵菜單中看到External Tools – Autoprefixer。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM