compass 是sass的一個工具庫 compass在sass 的基礎上封裝了一系列有用的模塊，用來補充和豐富sass的工能， 安裝： compass是用 ruby語言開發的，所以安裝它之前必須安裝ruby。 命令： gem install compass 項目初始化： 要創建一個你的Compas ...
compass 是sass的一個工具庫
compass在sass 的基礎上封裝了一系列有用的模塊，用來補充和豐富sass的工能，
安裝：
compass是用 ruby語言開發的，所以安裝它之前必須安裝ruby。
命令：
gem install compass
項目初始化：
要創建一個你的Compass 項目，如果項目的名字叫 myproject
compass create myproject
會在當前的目錄下生成這個目錄，裡面有config.rb文件，還有兩個子目錄sass 和 stylesheets 前者存放sass 源文件，後者放編譯後的
css文件。
編譯：
我在開發的時候寫出來的是文件尾碼名為scss的文件。只有編譯成css文件，才能用到網站上。
compass 的編譯命令為
compass compile
該命令在項目根目錄下運行，將會sass 子目錄中的scss 文件編譯成css文件，保存在stylesheets子目錄中。
預設編譯出來的css 文件帶有大量的註釋，生產環境需要壓縮後的css文件
compass compile --output-style compressed
如果重新編譯未修改過的文件
compass compile --force
除了使用命令參數，還可以在配置文件config.rb 中指定編譯模式。
output_style = :expanded
:expanded 表示編譯後保留原格式， 其他值還包括: nested,
:compact和compressed 進入生產階段後，就要改為:compressed模式。
output_style = :compressed
也可以通過指定environment的值（:production或者:development），智能判斷編譯模式。
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性編譯命令，compass還有自動編譯命令
compass watch
只要scss文件發生變化，就會被自動編譯成css文件。
compass 的模塊
compass採用模塊結構，不同模塊提供不同的功能，內置5個模塊。
reset css3 layout typography unilities
reset模塊
在編寫自己的樣式之前，有必要重置瀏覽器的預設樣式。
寫法是：
@import "compass/reset"
上面的@import命令，用來指定載入模塊，這裡就是載入reset模塊。編譯後，會生成相應的css reset代碼。
CSS3模塊
該模塊提供24 中css3命令。如：
圓角(border-radius) 的寫法,
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
上面的@include命令，表示調用某個mixin（類似於C語言的巨集），5px是參數，這裡用來指定圓角的半徑。
編譯後的代碼為:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
如果只需要左上角為圓角，寫法為
@include border-corner-radius(top, left, 5px);
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;
}
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');}
函數與mixin的主要區別是，不需要使用@include命令，可以直接調用。
