Webstorm 編譯Sass

一、安裝Ruby Installer： http://rubyinstaller.org/downloads/

二、檢查是否安裝成功：cmd->gem -v

三、安裝sass：cmd->gem install sass

四、Webstorm內配置Sass編譯

      1.Webstorm->File->Settings->Tools->File Watchers

 2.Watcher settings：

          (1)Program：sassPath/sass.bat

          (2)Arguments：「--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css」，在指定的目錄下生成css、map文件，目錄如下：

 (3)Output paths to refresh：可不填，因為開啟sass.bat已經設定檔案位置參數。

五、補充Webstorm中設定File Watchers是當檔案中有任何改變時就去編譯它，那如果我們要主動去編譯的話可以使用以下設定。

     1.Webstorm->File->Settings->Tools->External Tools->+

2.settings：

              (1)Program：sass安裝的目錄sass.bat

              (2)Parameters：「--no-cache --sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css」

              (3)Working directory：$FileDir$//目前檔案的目錄。

          3.在要編譯的檔案按下右鍵，就可主動去編譯，而編譯出來的css