PHPStorm 安装SASS/SCSS、Compass

1、安装 Ruby

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文件！