Allenmind's Blog

听说，Sass和Compass更配哟。来看看Compass的基本用法！

目录

1. Compass和Sass
2. 安装Compass
3. 项目初始化
4. 编译
5. Compass的模块
6. Compass的Helper函数

一、Compass和Sass

之前写了一篇关于Sass基本用法的文章。Sass可以加快CSS的编写效率，让CSS的开发变得更加简单和可维护。但是，想要发挥Sass的全部功力，就需要配合Compass一起使用。（就好像，下雨天和巧克力更配哟~这样的道理）

Compass是Sass的工具库（Toolkit）。

Sass本身只是一个编译器，Compass是在它的基础上，封装了一系列有用的模板和模块，补充了Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rail、python和Django。

二、安装Compass

Compass和Sass一样，同样是Ruby语言开发的，所以，要先安装Ruby。

当安装完Ruby后，现在假设在Windows环境下，只要在命令行输入一下命令，即可安装Compass：

gem install compass

三、项目初始化

现在我们来创建一个Compass项目，假设项目名称为“learnCompass”，我们在当前目录的命令行输入：

compass create learnCompass

然后就会看到在当前目录中会出现一个叫learnCompass的文件夹。

里面有3个东西：

• config.rb文件：是项目的配置文件
• sass文件夹：存放Sass源文件
• stylesheet文件夹：存放编译后的css文件

四、编译

当我们写完.scss文件后，需要经过编译，才能生成css文件。现在说一下如何通过Compass来编译.scss文件。

Compass的编译命令是：

compass compile

这条命令要在 项目的根目录 下运行。效果是会将sass文件夹里面的.scss文件，编译成css文件，然后保存在stylesheet文件夹里面。

默认情况下，编译出来的css文件是带有很多的注释。在生产环境中，我们需要的是压缩后的css文件，这时候要使用 --output-style 参数。

compass compile --output-style compressed

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

compass compile --force

除了使用命令行的参数，还可以直接在配置文件（config.rb）中指定编译模式：

output_style = :compressed

这里的参数和Sass的编译模式一一对应，:nested、:expanded、:compact和:compressed。

另外，可以指定environment的值（:production或:development），智能判断编译模式。

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

在命令行模式下，除了一次性编译命令，Compass还有自动编译命令：

compass watch

运行这条命令后，只要.scss文件发生了变化，就会被自动编译成css文件。

更多Compass命令行的用法，请参考官方文档

五、Compass的模块

Compass采用模块结构，不同的模块提供不同的功能。目前，Compass内置了5个模块：

• reset
• css3
• layout
• typography
• utilities

这5个模块提供了Compass的主要功能。

当然，我们也可以自行加载网上的第三方模块，或者自己动手编写模块。

下面来介绍一下如何使用模块：

使用模块的大致方法是：先用@i 大专栏  Allenmind's Blogmport命令把那个模版加载进来，然后再用@include命令调用模版里面的各种mixin。

1、reset模版

这个reset模版编译出来的CSS文件，就是一般用来重置浏览器默认样式的CSS文件（reset.css）。

@import "compass/reset";

2、css3模版

这个模版已经帮你把19种CSS3属性分别写成了19个Mixin，每个Mixin里面写好了各种浏览器前缀和兼容手段。导入模版后，用@include命令调用你想用的属性的Mixin即可。具体各个Mixin的用法请看：这里。

例子1： CSS圆角（border-radius）

@import "compass/css3";

.rounded1 {
  @include border-radius(5px);
}

.rounded2 {
  @include border-corner-radius(top, left, 5px);
}

编译后的CSS代码为：

.rounded1 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.rounded2 {
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
}

例子2：透明（opacity）

@import "compass/css3";

#opacity {
 @include opacity(0.5);
}

编译后的CSS代码为：

#opacity {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

例子3：inline-block

@import "compass/css3";

.div-inline {
  @include inline-block;
}

编译后的CSS代码为：

.div-inline {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}

3、layout模版

layout模版提供了布局功能（目前有3个功能：Grid Background、Sticky Footer 和 Stretching）。

例子：指定子元素占满父元素（Stretching）：

@import "compass/layout";

#stretch-full {
  @include stretch;
}

4、typography模版

typography模版提供了版式功能（链接、列表、文本处理、Vertical Rhythm）。

例如，指定链接（Link）各个状态的颜色的Mixin为：

link-colors($normal, $hover, $active, $visited, $focus)

使用时写成：

@import "compass/typography";
a {
  @include link-colors(#F00, #0F0, #00F, #CCC, #AC0);
}

编译后的CSS代码为：

a {
  color: #F00;
}

a:visited {
  color: #CCC;
}

a:focus {
  color: #AC0;
}

a:hover {
  color: #0F0;
}

a:active {
  color: #00F;
}

5、utilities模版

utilities模版提供某些不属于其他模块的功能。

比如，清除浮动：

@import "compass/utilities";

.clearfix{
  @include clearfix;
}

六、Compass的Helper函数

Compass提供了一些补充函数。这些函数可以大大增强Sass的威力。

例如，image-width() 和 image-height() 可以返回图片的宽和高。

又例如，inline-image() 可以将图片转为data协议的数据。

@import "compass";

$picWidth: image-width("pic1.png");
$picHeight: image-height("pic1.png");

.pic {
  width: $picWidth;
  height: $picHeight;
}

（图片默认放在该compass项目目录里面的images文件夹里面，没有就新建一个）

编译后的CSS代码为：

.pic {
  width: 405px;
  height: 540px;
}

(本文主要参考阮一峰老师的文章)