sass是基于ruby环境的，如果需要通过webstorm直接将scss文件编译为css文件，则还需要基于node环境。也就是需要安装（ruby、sass、node.js三个环境）
环境安装：
1、首先打开ruby官网下载ruby文件 http://rubyinstaller.org/downloads
如下图所示，下载ruby文件，然后在安装的过程中，务必选中Add Ruby executables to your PATH选项
2、打开开始菜单，找到Ruby文件夹下的Start Command Prompt with Ruby(如下图)
3、在命令中输入 gem install sass来下载sass，接下来会提示下载成功，如果下载不成功的话可以通过淘宝镜像来下载sass。具体步骤百度下即可
4、安装nodejs
1）到nodejs官网，下载nodejs，下载完成后直接傻瓜式安装，安装路径可自行选择
2）安装完成后，window+R打开运行窗口--》cmd
然后输入node -v会输出node的版本号，这说明node安装成功了
5、postcss-cli(在webstorm中，自动将scss文件编译成css文件的必要插件)
1）window+R打开运行窗口--》cmd
2）输入npm -v会输出npm的版本号（npm在安装node的时候已经自动安装了，所以直接运行即可）
3）输入npm，会输入如下代码
4）输入命令npm install postcss-cli -g
5）输入命令npm install autoprefixer -g
6）输入命令npm install postcss-cli -g（如果不报错的话说明安装成功了）
6、在webstorm中设置，来确保sass文件自动编译为css文件
1）设置File Watchers
点击左上角的File→Settings→File Watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作（标黄的为必填项，program、Arguments和Out Paths to refresh参数按下列配置）：
program：那里是你安装ruby中响应的scss.bat的路径
Arguments:可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
--no-cache --sourcemap=none --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css （此处为css文件夹中不生成sourcemap文件）
注意,$FileName$后面有个冒号,然后$FileParentDir$表示的是scss文件所在的文件夹的父级文件夹,而不是scss文件的父文件夹.
Output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
经过以上配置就实现了，webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
2）设置External Tools
点击左上角的File→Settings→External Tools
1）点击绿色的+ 详情请看下面的截图
其中Program是postcss的路径，这个在安装postcss第一次执行命令npm install postcss-cli -g的时候上边会有输出
其他均按下图填写即可
Parameters：-u autoprefixer -o $FileDir$/$FileName$ $FileDir$/$FileName$
Working directory:$ProjectFileDir$
2）新建项目如test，在test项目中添加一个sass文件夹和css文件夹，在sass文件夹中新建一个test.scss文件
然后在 html中可直接引入css/test.css
然后左侧工作区单击右键，选择autoprefixer，过一会儿会自动生成test.css文件
整个配置过程完成！！
