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');}