CSS預編譯器配置-------LESS Sass Stylus webstorm

預編譯器配置說明

      開頭語，發揮CSS預處器的做用是一種頗有挑戰性的事情。CSS預處器有不一樣的語言，就有不一樣的語法和功能。

　　語法

　　　　在使用CSS預處器以前最重要的是對語法的理解，幸運的是，這三種CSS預處器的語法和CSS都差很少。

1. Sass和LESS都使用的是標準的CSS語法。這使用CSS預處器很是容易的將預處器代碼轉換成CSS代碼。默認Sass使用「.scss」擴展名，而LESS使用「.less」擴展名；
2. 重要的一點是，Sass也同時支持老的語法,就是不使用花括號和分號，並且文件使用「.sass」擴展名；
3. Stylus的語法花樣多一些，它使用「.styl」的擴展名，Stylus也接受標準的CSS語法，可是他也接受不帶花括號和分號的語法。

 

SASS預編譯器配置

首先介紹的是.scss的配置：

根據實際操做的過程，總結如下步驟：（限window系統）

一、下載RubyInstaller，運行安裝（只管點擊next便可）。

本文下載的是下圖的的文件

而後直接雙擊，進行安裝，選擇安裝目錄，順便勾選上添加到環境變量（我的建議）以下圖

二、安裝完成

打開命令行，ruby -v查看下吧，安裝成功

如今ruby安裝成功了，接下來就是配置scss開發環境了：

打開cmd，在命令行中輸入：

gem insall sass

出現下圖中第一個紅框中的內容，說明sass安裝成功。

若是你還不放心，能夠輸入以下命令看下sass的版本號。

sass -v

如上圖中第二個紅框中的內容。
至此sass安裝成功。

配置webstorm中scss：

先在菜單欄選擇File   ---->>>> Settings....    以下圖

在settings中搜索file watchers工具，在此工具中添加一個scss的watcher，按照下圖設置各項。點擊ok

 

 

這樣webstorm中scss配置好了。

建個scss文件試試以下圖，寫個簡單的scss代碼進行測試以下圖

 

會自動生成對應的css文件。以下圖：

 

 

剛纔若是沒修改Output paths，那麼按照默認的路徑會在.scss文件同目錄下實時產生修改過的.css文件。

ps：項目所在的路徑中請不要出現中文，否則sass在編譯是會出現編碼錯誤的哦。

下面講解配置SASS（這是老的語法）

首先不用安裝其餘軟件了，由於其實剛纔在配置scss的時候已經將老版本的sass安裝到ruby  下面的bin目錄下了，以下截圖

其餘不用配置，咱們直接進入Webstorm   File   ------------->>>> Settings...   -------->>>>File Wachers   按下圖進行配置

好了，到這兒SCSS和SASS的開發環境就已經搭建成功了。

搭建好了還不行，最好進行測試一下，創建一個.sass的文件：

接着咱們能夠實時看到同級目錄下有個同名的css文件生成，這個文件就是sass文件編譯生成的，以下圖

 

 

下面進行講解Stylus預編譯環境的搭建：

要搭建這個環境，咱們首先是要先安裝nodeJs

咱們先下載安裝文件下載地址：官網http://www.nodejs.org/download/ 

 根據本身電腦配置下載對應的版本進行安裝

  步驟 1 : 雙擊下載後的安裝包 v0.10.26，以下所示：

步驟 2 : 點擊以上的Run(運行)，將出現以下界面：

步驟 3 : 勾選接受協議選項，點擊 next（下一步） 按鈕 :

步驟 4 : Node.js默認安裝目錄爲 "C:\Program Files\nodejs\" , 你能夠修改目錄，並點擊 next（下一步）：

步驟 5 : 點擊樹形圖標來選擇你須要的安裝模式 , 而後點擊下一步 next（下一步）

步驟 6 :點擊 Install（安裝） 開始安裝Node.js。你也能夠點擊 Back（返回）來修改先前的配置。 而後並點擊 next（下一步）：

安裝過程：

點擊 Finish（完成）按鈕退出安裝嚮導。

檢測PATH環境變量是否配置了Node.js，點擊開始=》運行=》輸入"cmd" => 輸入命令"path"，輸出以下結果：

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32; C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\; c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib; C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\; C:\Users\rg\AppData\Roaming\npm

咱們能夠看到環境變量中已經包含了C:\Program Files\nodejs\

檢查Node.js版本 

而後咱們進行  Stylus的安裝，在cmd中輸入如下命令：

npm install stylus

此時，表示Stylus安裝成功，若是你還有疑問的話，請在安裝目錄下能夠找到下圖中紅色區域中的文件

接下來咱們就能夠在WebStorm中對Stylus的開發環境進行配置了

咱們直接進入Webstorm   File   ------------->>>> Tools...   -------->>>>File Wachers   按下圖進行配置

 

接下來就是測試咱們你們的Stylus環境是否生效，首先新建一個  .stylus 的文件  以下圖

接着咱們能夠實時看到同級目錄下有個同名的css文件生成，這個文件就是 .stylus文件編譯生成的，以下圖

好了，大功告成，這個配置咱們就作好了。

最後咱們搭建LESS的編譯環境

less和Stylus的安裝同樣，一樣依賴於Node JS的環境，也就是說也要先安裝Node Js（若是安裝Node JS請參考前面的介紹）。惟一不一樣的是在Node JS的Command控制面板輸入的命令不同：

npm install less

 

這樣就安裝完LESS的編譯命令，能夠在本地正常編譯LESS源文件。若是您想下載最新穩定版本的LESS，還能夠嘗試在Node JS的Command控制面板輸入：

$ npm install less@latest

當安裝完了之後，能夠在安裝目錄下找到下圖中我文件

而後就是在WebStorm中搭建Less編譯環境以下圖

接着仍是老規矩，測試一下，以下圖建立一個   .less文件

 

 接着咱們能夠實時看到同級目錄下有個同名的css文件生成，這個文件就是 .less文件編譯生成的，以下圖

 

      到此，大功告成，三種主流的CSS預編譯語言開發環境搭建成功。

若有很差的地方，歡迎各位提建議意見。

===========================================================================

若是以爲對您有幫助，微信掃一掃支持一下：

 

 

      

參考文章：

http://caibaojian.com/sass-less-stylus.html

http://www.runoob.com/nodejs/nodejs-install-setup.html

http://blog.csdn.net/ernijie/article/details/51672346

http://www.cnblogs.com/fxair/p/3708099.html

https://segmentfault.com/q/1010000001915391