1. 前提条件：
电脑已经完成Ruby，Sass，Compass的安装 。
2.配置
打开webstorm ---- settings ---- Tools ---- files Watchers ---- 点击加号，选择scss / sass
然后按照下图进行操作：
1、Program :
Ruby安装目录下 ---- bin ---- scss.bat / sass.bat文件路径
2、Argument ：
可以配置编译后的文件的输出路径。
相关配置(举例两种)：
1. --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css
举个例子,比如说我有一个test项目,test项目下有一个scss/sass文件,按照这样配置的结果就是，编译后的css文件就在scss/sass文件下
2. --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
举个例子，比如说我有一个test项目,test项目下有一个scss/sass文件夹,该文件夹下存放的就是scss/sass文件。那么按照这样配置的结果就是，scss/sass文件所在的文件夹就是scss/sass,scss/sass文件夹的父级文件夹就是test,然后找到test项目里面的css文件夹,编译后的css文件就存放在此目录下
注意：$FileName$后面有个冒号。 $FileParentDir$ 表示scss/sass文件所在的文件夹的父级文件夹，而不是scss/sass的父文件夹
3、Output paths to refresh:
相关配置：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
经过以上的配置就可以实现实时编译了
注意点：
1. 同步编译只能在项目文件夹下，也就是webstorm左侧打开的项目，随便打开一个项目外的文件是不行的
2. Sass/Scss编译不能带有中文，无论是路径名，文件名，还是文件里的内容，都无法识别中文。如果要修改文件名也不是不可以的,建议文件名尽量使用英文。
3.webstorm中Scss/Sass编译时目录或内容包含中文字符报错。
1、 解决目录带带中文问题
Encoding::CompatibilityError: incompatible character encodings: GBK and UTF-8
打开 --trace
出现如下提示信息:filesystem.rb:87:index
添加encode("utf-8","gbk")
2、如果Scss/Sass文件中内容带中文会报错，就给Scss/Sass文件的第一行添加@charset "utf-8"
4.编译风格的设置
提供了四种编译风格：
nested : 嵌套缩进的CSS代码，为默认值。
expanded ： 没有缩进、扩展的CSS代码。
compact : 简洁格式的CSS代码。
compressed : 压缩后的CSS代码。
更换编译风格：
在Arguments配置的末尾添加 --style 编译风格
如: --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css --trace --style compressed
将编译风格设置完毕后,要使用哪种就勾选哪种
