http://rubyinstaller.org/downloads
配置好系统环境，将ruby的bin目录绝对路径添加到path环境变量中，windows版安装的时候可以勾选自动添加
、
2、安装 SASS和Compass 执行下面命令安装： gem install sass gem install compass
3、新增config.rb文件
文件内容如下：
sass_dir = "sass" css_dir = "css" environment = :development output_style = (environment == :production) ? :compressed : :expanded Encoding.default_external = Encoding.find('utf-8') #支持中文注释 line_comments = false #去掉行注释
当 environment 为 :production 时生成的 css 文件将会是压缩成一行的样子了。
文件的层次结构如下：
其中share.scss、config.rb文件是手动添加的，.sass-cache、share.css是compass编译自动生成的
4、配置 Compass 编译环境
打开 setting -> Language & Framework 下面有个 Compass
5、添加File Watchers
当添加 *.scss 文件时，phpstorm会自动提示添加File Watcher
Program: C:\Ruby23-x64\bin\compass.bat Arguments: compile D:/Hacfin/Code/ThinkPHPDemo/Public/css $UnixSeparators($FilePath$)$ Working directory: D:/Hacfin/Code/ThinkPHPDemo/Public/css Output paths to refressh: D:/Hacfin/Code/ThinkPHPDemo/Public/css
@import "compass";等元素时，提示找不到时，参考以下说明即可：
After that, you should use Compass's own command line tool to compile your SASS code: cd path/to/your/project/ compass compile
此时配置完毕！编写scss文件时，自动生成css文件！
郎涯工作室 认证博客专家 Java PHP 视音频 微信搜索：【郎涯工作室】关注我。卖码为生，有代码洁癖。不爱广度，爱深度 — 专注分享Java / PHP / C++ / 视音频领域等技术。想和你一起，每天进步一点点，做一个不凡的人！