一、Sass安装
-
ruby安装
mac系统默认安装了ruby，可以直接跳过此步骤，linux和windows需要安装ruby环境。
windows安装ruby环境：
到ruby官网下载自己系统适用的版本（我下的是2.1.7（x64））
安装ruby，此步骤只需留意勾选Add Ruby executables to your PATH这个选项，它将添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境，影响Webstorm 自动编译。
- Sass安装（淘宝RubyGems镜像）
在开始菜单找到Start Command Prompt with Ruby
在命令行中输入
1 gem sources --remove https://rubygems.org/
移出原有的源，
1 gem sources -a https://ruby.taobao.org/
添加淘宝镜像源
1 gem sources -l
查看当前的源
*** CURRENT SOURCES ***
https://ruby.taobao.org
务必请确保只有 ruby.taobao.org
1 gem insall sass
安装Sass
二、Webstorm File Watcher配置（sass、scss文件自动编译）
打开webstorm设置页面
windows下 File -> Settings， os x下 Webstorm -> Preferences
在配置窗口，找到Tools -> File Watchers
点击右侧加号选择SCSS（或SASS）进行添加
配置如下：
一般情况下，只需要修改Arguments和Output paths to refresh
Arguments:
--style expanded --no-cache --update $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh:
$ProjectFileDir$/css/$FileNameWithoutExtension$.css
根据自己工程结构进行修改。
至此，Sass安装和Webstorm File Watcher配置（sass、scss文件自动编译）便完成了。在webstorm下编写scss可自动编译成css。