webstorm scss 自动编译添加css3前缀
1、安装ruby和nodejs，关于这两个软件的安装，非常简单，大家自行百度。安装完成后修改nodejs的镜像地址，因为国外的镜像地址不稳定，我用到淘宝镜像。
#移除ruby的镜像地址
gem sources --remove https://rubygems.org/
#添加淘宝的镜像
gem source -a http://ruby.taobao.org
#查看镜像
gem source -v
#这是我的配置
*** CURRENT SOURCES ***
https://ruby.taobao.org/
2、安装scss
gem install sass
3、安装Autoprefixer，是不是全局安装（-g）那就看你自己的环境了
npm install autoprefixer -g
4、安装postcss-cli，Autoprefixer其实是postcss的插件
npm install postcss-cli -g
5、配置webstorm-scss
新建一个scss文件，如demo.scss，文件创建完毕后，在打开的文件右上角，点击Add watcher
6、修改Arguments，默认输出到scss文件同目录，建议修改到其他位置，我这里修改到上一级的stylesheets目录下
修改前--no-cache --update $FileName$:$FileNameWithoutExtension$.css
膝盖后--no-cache --update $FileName$:$FileParentDir$\stylesheets\$FileNameWithoutExtension$.css
7、配置webstorm-autoprefixer
打开Webstorm设置，File -> settings -> Tools -> File Watcher ;点击新增按钮，如图：
8、配置autoprefixer
我配置的参数为--use autoprefixer -w -c $FileParentDir$\autoprefixer.json $FileParentDir$\stylesheets\$FileName$ --dir $FileParentDir$\css
-w watch监控文件变化
-c autoprefixer的配置文件
--dir 输出文件目录
9、配置autoprefixer，具体配置参数大家可以查看autoprefixer的github
https://github.com/postcss/autoprefixer
我的配置
{ "browsers": ["last 2 version"]}
10、创建一个scss文件，查看效果，autoprefixer的执行可能会延后，大家稍等片刻就可看到添加css3前缀的文件
scss
div { display: flex; animation: all 1s linear;}
css
div { display: flex; animation: all 1s linear; }
添加css3前缀的css
div { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-animation: all 1s linear; animation: all 1s linear; }
11、下面介绍直接导入配置文件的方式创建watch，比如大家重装系统，讲配置给团队中其他人使用，修改下command的地址即可
http://pan.baidu.com/s/1dD796G5#path=/工具/前端/webStorm
12、下载watchers.xml，打开Webstorm设置，File -> settings -> Tools -> File Watcher，点击导入，导入成功后修改命令的地址，因为大家的软件安装位置和我的不一样
13、到这里就完成了，测试方法和上面的一样，是不是很简单！
14、如果创建的autoprefixer无法自动生成文件，大家可以查看http://www.weste.net/2015/06-02/103795.html的方式创建External Tools