本位藉助UndefinedCheng大神，本人只是搬運工，為了方便以後快速檢視

本文前提是電腦裡已經順利安裝了ruby,sass等之後，再進行webstorm中配置sass的watcher，以及改變watcher中的預設選項；如果以上都還沒有做，可以自行百度解決，很容易找到的；

webstorm支援sass的同步編譯,也就是即寫即編譯,並且可以指定編譯後的css的目錄.

本文使用的webstorm為11.0版本

點選左上角的File→Settings→File Watchers  

在彈窗的視窗的右上角點選綠色的 ‘+’ 號,然後選擇scss

然後按照下圖進行操作：

其中黃色的地方都要填好，program那裡是你安裝ruby中響應的scss.bat的路徑，如果安裝ruby時，你不是按照預設c盤路徑按裝的話，那麼那裡是需要需改的；

按道理其中只有兩個地方是需要修改的,其他我沒有改過,都是預設就是那樣的：

1、Arguments:

可以配置編譯後的檔案的輸出路徑,我這裡寫的是:

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

注意,$FileName$後面有個冒號,然後$FileParentDir$表示的是scss檔案所在的資料夾的父級資料夾

舉個例子,我的專案叫lianxi,裡面有個sass資料夾,裡面存放scss檔案,那麼按照這樣配置的結果,www.scss所在的資料夾就是sass,sass的父資料夾就是lianxi,然後找到lianxi下的css資料夾,編譯後的www.css檔案就會在這裡.

如圖所示：

2、Output paths to refresh:

改成這樣:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

經過以上配置就實現了，webstorm支援sass的同步編譯,也就是即寫即編譯,並且可以指定編譯後的css的目錄.

這裡需要注意兩點：

1》同步編譯只能在專案資料夾下,也就是webstorm左側開啟的專案.隨便開啟一個專案外的檔案是不行的.

2》這個和webstorm沒有什麼關係,就是sass編譯不能帶有中文,無論是路徑名,檔名,檔案裡的內容,都不能識別中文,如果要修改它也不是不可以,但我覺得不用中文也挺好的,養成好習慣嘛.