Compass学习小结

PS:本文基于SASS进行陈述

What is Compass

Compass

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

Installation

安装Compass的前提是你的电脑中已经安装了Ruby和Gem，没安装？点我点我
题外话：建议将Gem的下载源更改为淘宝源，国内的防火墙太牛逼了。传送门
在终端输入：

sudo gem install compass   //for Linus or Mac
gem install compass        //for Windows

Enter compass -v to ensure you install compass successfully.

Create Compass Project

First:

compass create myProject

Then you will get three items:

Three items after create

1. config.rb
   important file, you will write configuration in this file.

2. sass dictionary
   non-essential, the scss or sass source files in here.
3. stylesheets dictionary
   non-essential, the css source files after compass compile are stored in here.

Some Compass Commands

In fact, in my opinion, just one command you might know:

compass watch

Compass will watch the scss source file automatically, if you modify the file , he will compile .scss file to .css file. So easy, right?
You must pay more attention in config.rb, maybe config.rb like this:

// in my own project, please config it by your own condition.
http_path = "/"
css_dir = "public/css-cache"
sass_dir = "sass"
images_dir = "public/img"
javascripts_dir = "public/js"

If you want know more commands, please visit official website. Click it

Compass modules

Why is Compass so powerful? Because Compass pack some useful inside modules. They can help you to write more effective css code with sass. Five inside modules in Compass,they are:

• reset
• css3
• layout
• typography
• utilities

---

1. reset

It help you to reset html tag style. Call it like this:

// take it in the head of file
@import "compass/reset";

This code will load reset code automatically.

2. css3

Most useful modules.
In this modules,compass gives about 21 css3 commands.The official website gives some samples, you can see that.

For example, border-radius

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

After compass compile:

.rounded {
  -moz-border-radius: 5px;　　　　
  -webkit-border-radius: 5px;　　　　
  -o-border-radius: 5px;　　　　
  -ms-border-radius: 5px;　　　　
  -khtml-border-radius: 5px;　　　　
  border-radius: 5px;
}

3.layout

This module provides layout function. No much issue to explain.

4.typography

This module provides format function.
For example , you can assign the format of a tag:

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

5.utilities

Utility function.
For example, clearfix:

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

Compass Sprite(用compass制作雪碧图)

The detail