1、安装 Ruby
执行下面命令安装:
http://rubyinstaller.org/downloads
、
执行下面命令安装:
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文件!