sass或者scss編譯為css時，webstorm配置如下：（http://www.cnblogs.com/phoenix-smile/p/5063216.html）
如果沒有安裝ruby則先安裝，下載地址：http://rubyinstaller.org/downloads
安裝注意：
1.安裝ruby，此步驟只需留意勾選Add Ruby executables to your PATH這個選項，它將新增環境變數，不然以後使用編譯軟體的時候會提示找不到ruby環境，影響Webstorm 自動編譯。
2.安裝後，在開始選單找到Start Command Prompt with Ruby
3.安裝scss   命令為：
 
gem install sass
4.安裝Autoprefixer，是不是全域性安裝（-g）那就看你自己的環境了   命令為：npm install autoprefixer -g
5.安裝postcss-cli，Autoprefixer其實是postcss的外掛        命令為：npm install postcss-cli -g
6.配置webstorm-autoprefixer  開啟Webstorm設定，File  -> settings  -> Tools -> File Watcher ;點選新增按鈕
7.修改Arguments，預設輸出到scss檔案同目錄，建議修改到其他位置，（
 
7.1或7.2任選）
7.1修改到上一級的stylesheets目錄下
    修改前--no-cache --update $FileName$:$FileNameWithoutExtension$.css
    修改後--no-cache --update $FileName$:$FileParentDir$\stylesheets\$FileNameWithoutExtension$.css
  7.2修改到指定css目錄下，從專案根目錄開始找
    修改前 Arguments:--no-cache --update $FileName$:$FileNameWithoutExtension$.css
          Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

    修改後（本專案） 
 
Arguments:--style expanded --no-cache --update $FileName$:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css
          Output paths to refresh:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/webAppModal/assets/style/css/$FileNameWithoutExtension$.css.map

8.配置autoprefixer

File->Tools->External Tools 點選add

Name:Autoprefixer

description:Autoprefixer

Program:C:\Program Files\nodejs\node_global\postcss.cmd

Parameters:-u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$

Working directory:$ProjectFileDir$

其餘預設不變

參考連結：http://jingyan.baidu.com/article/3c343ff7e0a39d0d3779633c.html