下面就是在WebStorm设置SASS的File Watchers的步骤(限window系统)：
1. 安装Ruby
http://www.rubyinstaller.org/，去这里下载，然后安装（只管点击next即可）。安装过程中注意勾选上第二项！即将Ruby加入到可执行的环境变量中去，第一个选项可以不用选。 
安装结束后在命令行中运行 ruby -v 能看到对应的版本则说明安装正确。
2. 安装Sass
安装好Ruby后，打开CMD命令，输入：
gem install sass
注意：
这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像：
$ gem sources –remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
* CURRENT SOURCES *
https://ruby.taobao.org
如果我们看到最后显示的地址只有国内淘宝提供的镜像地址就OK了
请确保只有 ruby.taobao.org
$ gem install sass
完成后输入sass –v 就会返回sass的版本号。
OK以后，在webstorm里面选择本机ruby目录下bin目录里面的scss.bat文件（如果需要编译SASS文件则选择sass.bat）
3. 设置Webstorm
上面都安装没问题以后，就可以设置Webstorm了。
下面的输出参数，可以根据自己的需要填写，下面列出的是一些常用的参数
style表示解析后的css是什么格式，如：–style compressed，有四种取值分别为：nested，expanded，compact，compressed.
sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。 webstorm是默认开启sourcemap的，所以可以不填写
debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。
根据如下路径打开 WebStrom 的配置：
File > Settings > Tools > File Watchers
选择右边的 + 号，在弹出界面点击你想要添加的 Watcher， Sass 或是 Scss，我现在使用的是 Scss 。 
Arguments 中的配置信息如下：
–no-cache –update $FileName$:$FileNameWithoutExtension$.css –style expanded