一、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:

　　$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

　　根据自己工程结构进行修改。

　　至此，Sass安装和Webstorm File Watcher配置（sass、scss文件自动编译）便完成了。在webstorm下编写scss可自动编译成css。