Sass與Compass－回顧

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

在命令列模式下，除了一次編譯命令，compasspass還有自動編譯命令

在命令列模式下，除了一次性編譯命令，compasspass還有自動編譯命令

在命令列模式發生變化，就會被自動編譯成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; 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"; 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

utilities某些不屬於其他模組的功能。

例如，清除浮動：

import "compass/utilities/";

.clearfix {
@include clearfix;
　}
例如表格：
@import "compass/utilities";
　　}

編譯後
table th {

text-align: center;

font-weight: bold;
　}
table td,
table th {> tdo〜 .nu​​meric {
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指令，可以直接呼叫。

更多Sass與Compass－回顧相關文章請關注PHP中文網！