PS:本文基于SASS進(jìn)行陳述

What is Compass

Compass

Installation

安裝Compass的前提是你的電腦中已經(jīng)安裝了Ruby和Gem度秘，沒安裝顶伞？點(diǎn)我點(diǎn)我
題外話：建議將Gem的下載源更改為淘寶源，國內(nèi)的防火墻太牛逼了剑梳。傳送門
在終端輸入：

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