webstorm中LESS環境的搭建

       LESS是一門CSS預處理器語言，通俗的將，CSS預處理器用一種專門的編程語言，進行web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲css增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。目前比較優秀的CSS預處理器語言有SASS、LESS、stylus。
這裏呢我介紹一下less的基本用法。
       LESS 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
       LESS 可以運行在 Node 或瀏覽器端。

LESS環境搭建：

兩種方式：

       1.LESS是依賴於nodejs環境的，所以首先要安裝nodejs，這裏可以去官網根據自己電腦的操作系統下載相應的nodejs安裝包。

安裝less，輸入命令 npm intall -g less
當安裝後，在cmd命令行中輸入 lessc –version 出現版本信息表示安裝成功。

Less命令行的使用方式

首先我在桌面上建立了一個lesscodes的文件夾，新建了一個main.less文件，其內容如下：

@mainColor:#e72322;
@width:300px;
body{
background-color: @mainColor;
width: @width;
}

在cmd命令行中，先進入到該目錄 cd C:\Users\Administrator\Desktop\lesscodes
然後 輸出 lessc main.less 編譯此文件，編譯之後的會在命令行中顯示，如圖:

但是，希望編譯之後的內容能夠在文件中顯示，怎麼做呢？很簡單，就是在命令行中 輸入
lessc main.less > main.css
後面表示編譯後的文件輸入到css文件中去，看結果：
會發現多了一個.css文件，打開內容看一下，會發現內容就是上步中，控制檯輸出的內容。


其實這個過程挺麻煩的，不過我們在webstorm中配置less的開發環境

less在webstorm中的環境配置

1.點擊“file”> “settings……” 彈出設置界面，在左側導航找到“tool”>”file Watchers” 點擊“+”號按鈕找到less文件選項點擊添加。

配置選項如下：

Program: C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd
這裏輸入的是你安裝的less路徑
Arguments:--no-color $FileName$ 默認的的
Working directory:$FileDir$
Output paths to refresh:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

確認輸入無誤後點右下的“OK”按鈕。然後再點Settings 版右下的“Apply”應用按鈕。
2.點擊“file”–> “settings –> External Tools 點擊less
配置如下：
Programe：C:\Program Files\nodejs\node.exe你的nodejs的安裝路徑
Parameter

C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc$FilePath$ $FileDir$\$FileNameWithoutExtension$.css

working directory：自動生成的

這樣就完成了less在webstorm中的配置。
測試



test.less代碼：

@mainColor:#e92322;
@width:300px;
@height:300px;

div{
  background-color: @mainColor;
  width: @width;
  height: @height;
}

自動生成的test.css代碼

div {
  background-color: #e92322;
  width: 300px;
  height: 300px;
}

具體less語法，稍後分享！