SASS 和 Compass 用法小记

2016年12月02日前端笔记

Compass 是 Sass 的工具库，用 Ruby 语言开发，所以安装之前，必须安装Ruby。 Sass 本身只是一个编译器，Compass 在它的基础上，封装了一系列有用的模块和模板，有点像 Javascript 和 jQuery、Ruby 和 Rails 的关系。

安装

# 更新 RubyGems
sudo gem update --system

sudo gem install -n /usr/local/bin sass
sudo gem install -n /usr/local/bin compass

注意务必增加 -n /usr/local/bin，否则安装时会遇到权限问题：

ERROR:  While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

在父目录执行：

compass create myproject
cd myproject

或者进入已有目录后执行：

compass create init

会生成了一个 config.rb 和两个目录：

|-- config.rb       --- 配置文件
|-- sass/           --- 存放 sass 源文件
|-- stylesheets/    --- 编译后的 css 文件

配置文件 config.rb 的设置详见官方文档

下划线开头的文件（例如 _common.scss）表示局部文件，只能被别的 scss 引用包含。本身不会被编译成单独的 scss 文件。

手动编译：

compass compile [path/to/project]

自动检测文件变化并自动编译：

compass watch [path/to/project]

生产环境需要压缩后的 css 文件，去除注释空行等：

compass compile --output-style compressed

Compass 只编译发生变动的文件，如果你要重新编译未变动的文件，使用 --force 参数：

compass compile --force

也可以通过指定环境配置，智能判断编译模式，修改 config.rb：

environment = :development
output_style = (environment == :production) ? :compressed : :expanded

然后用以下命令编译：

compass compile -e production --force

Compass 采用模块结构，内置五个模块。官网文档和最佳实践

如何在自己的 scss 中引用？

@import "compass/reset";

除了模块，Compass 还提供一系列函数。比如 inline-image() 可以将图片转为 data 协议的数据。

@import "compass";
.icon { background-image: inline-image("icon.png"); }

编译后得到

.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

函数与 mixin 的主要区别是，不需要使用 @include 命令，可以直接调用。

参考文章：