使用webstorm自動編譯scss文件，並對生成的css文件自動添加瀏覽器支持前綴css書寫div { display: flex; animation: all 1s linear;}自動添加css3前綴後div { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-animation: all 1s linear; animation: all 1s linear; }
安裝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/
安裝scssgem install sass
安裝Autoprefixer，是不是全局安裝（-g）那就看你自己的環境了npm install autoprefixer -g
安裝postcss-cli，Autoprefixer其實是postcss的插件npm install postcss-cli -g
配置webstorm-scss新建一個scss文件，如demo.scss，文件創建完畢後，在打開的文件右上角，點擊Add watcher
修改Arguments，默認輸出到scss文件同目錄，建議修改到其他位置，我這裡修改到上一級的stylesheets目錄下修改前--no-cache --update $FileName$:$FileNameWithoutExtension$.css膝蓋後--no-cache --update $FileName$:$FileParentDir$\stylesheets\$FileNameWithoutExtension$.css
配置webstorm-autoprefixer打開Webstorm設置，File -> settings -> Tools -> File Watcher ;點擊新增按鈕，如圖：
配置autoprefixer我配置的參數為--use autoprefixer -w -c $FileParentDir$\autoprefixer.json $FileParentDir$\stylesheets\$FileName$ --dir $FileParentDir$\css-w watch監控文件變化-c autoprefixer的配置文件--dir 輸出文件目錄
配置autoprefixer，具體配置參數大家可以查看autoprefixer的githubhttps://github.com/postcss/autoprefixer我的配置{ "browsers": ["last 2 version"]}
創建一個scss文件，查看效果，autoprefixer的執行可能會延後，大家稍等片刻就可看到添加css3前綴的文件scssdiv { display: flex; animation: all 1s linear;}cssdiv { display: flex; animation: all 1s linear; }添加css3前綴的cssdiv { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-animation: all 1s linear; animation: all 1s linear; }
下面介紹直接導入配置文件的方式創建watch，比如大家重裝系統，講配置給團隊中其他人使用，修改下command的地址即可http://pan.baidu.com/s/1dD796G5#path=/工具/前端/webStorm
下載watchers.xml，打開Webstorm設置，File -> settings -> Tools -> File Watcher，點擊導入，導入成功後修改命令的地址，因為大家的軟體安裝位置和我的不一樣
到這裡就完成了，測試方法和上面的一樣，是不是很簡單！
如果創建的autoprefixer無法自動生成文件，大家可以查看http://www.weste.net/2015/06-02/103795.html的方式創建External Tools