compass 用法简介

Compass

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

2、安装

Compass是用Ruby语言开发的，所以安装它之前，必须安装Ruby。

LInux或OS x系统：

sudo gem install compass

windows系统：

gem install compass

3、项目构建

如创建一个myproject的项目文件：

compass create myproject 

进入myproject目录：

cd myproject

会有四个文件：
.sass-cache //也可能没有这个文件夹
sass
stylesheets
config.rb**

项目的compass文件已构建成功，接下来就可以在sass文件夹下编写.scss的代码了。

4、编译

• 编译

  将.scss文件编译成.css文件：

  compass compile

  该命令会将sass子目录中的.scss文件编译成.css文件。并保存在stylesheets目录中。

• 压缩

  compass compile --output-style compress

  默认状态下，编译出来的css文件带有大量的注释。但是进过增加--output-style 压缩后，压缩文件中不会有注释出现。

• 强制编译

   compass compile --force

  compass compile --output-style compress --force

• 指定编译模式
  在compass中除了使用命令行参数外，还可以在配置文件config.rb中指定编译模式。

  1. :expanded
     正常的编译
     
     output_style = ":expanded"

  2. :nested
     效果：保留.scss文件中的原格式（每个表情的缩进等）
     
  3. :compact
     
  4. :compressed
     
output_style = :compressed

     
     进入生产阶段后，就要改为:compressed模式

  也可以通过指定environment的值（:production或者:development），智能判断编译模式。
  　

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

• 自动编译命令

  compass watch

  这样，如果scss文件发生变化，就会被自动的编译成css文件。

5、Compass的模块

• reset

• css3

• layout

• typography

• utilities

reset模块

重置浏览器默认样式

@import“compass/reset”

CSS3模块

1.圆角

```
@import "compass/css3";
.rounded {
　　@include border-radius(5px);
}
```

2.透明

@import "compass/css3";
#opacity {
　　@include opacity(0.5); 
}

3.行内区块

@import "compass/css3";
#inline-block {
　　@include inline-block;
}

layout模块

该模块提供布局功能。比如，指定页面的footer部分总是出现在浏览器最底端：

@import "compass/layout";
#footer {
　　@include sticky-footer(54px);
}

又比如，指定子元素占满父元素的空间：

@import "compass/layout";
#stretch-full {
　　@include stretch; 
}

typography模块

该模块提供版式功能。比如，指定链接颜色的mixin为：

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

使用时写成：

@import "compass/typography";
a {
　 @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

utilities模块

该模块提供某些不属于其他模块的功能。比如，清除浮动：

import "compass/utilities/";
.clearfix {
　　@include clearfix;
}

再比如，表格：

@import "compass/utilities";
table {
　　@include table-scaffolding;
}

编译后生成

　 table th {
　　　　text-align: center;
　　　　font-weight: bold;
　　}
　　table td,
　　table th {
　　　　padding: 2px;
　　}
　　table td.numeric,
　　table th.numeric {
　　　　text-align: right;
　　}

6、Helper函数

除了模块，Compass还提供一系列函数。
有些函数非常有用，比如image-width()和image-height()返回图片的宽和高。
再比如，inline-image()可以将图片转为data协议的数据。

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

编译后得到

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