幾個(gè)月前，我介紹了Sass的用法。

Sass是一種"CSS預(yù)處理器"，可以讓CSS的開(kāi)發(fā)變得簡(jiǎn)單和可維護(hù)。但是，只有搭配Compass，它才能顯出真正的威力。

本文介紹Compass的用法。毫不夸張地說(shuō)，學(xué)會(huì)了Compass，你的CSS開(kāi)發(fā)效率會(huì)上一個(gè)臺(tái)階。

本文假設(shè)你已經(jīng)掌握了CSS的主要用法，如果你還懂Sass，那就更好了。但是不懂Sass，一樣可以閱讀本文。

一、Compass是什么？

簡(jiǎn)單說(shuō)，Compass是Sass的工具庫(kù)(toolkit)。

Sass本身只是一個(gè)編譯器，Compass在它的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補(bǔ)充Sass的功能。它們之間的關(guān)系，有點(diǎn)像Javascript和jQuery、Ruby和Rails、python和Django的關(guān)系。

二、安裝

Compass是用Ruby語(yǔ)言開(kāi)發(fā)的，所以安裝它之前，必須安裝Ruby。

假定你的機(jī)器(Linux或OS X)已經(jīng)安裝好Ruby，那么在命令行模式下鍵入：

sudo gem install compass

如果你用的是Windows系統(tǒng)，那么要省略前面的sudo。

正常情況下，Compass(連同Sass)就安裝好了。

三、項(xiàng)目初始化

接下來(lái)，要?jiǎng)?chuàng)建一個(gè)你的Compass項(xiàng)目，假定它的名字叫做myproject，那么在命令行鍵入：

compass create myproject

當(dāng)前目錄中就會(huì)生成一個(gè)myproject子目錄。

進(jìn)入該目錄：

cd myproject

你會(huì)看到，里面有一個(gè)config.rb文件，這是你的項(xiàng)目的配置文件。還有兩個(gè)子目錄sass和stylesheets，前者存放Sass源文件，后者存放編譯后的css文件。

接下來(lái)，就可以動(dòng)手寫(xiě)代碼了。

四、編譯

在寫(xiě)代碼之前，我們還要知道如何編譯。因?yàn)槲覀儗?xiě)出來(lái)的是后綴名為scss的文件，只有編譯成css文件，才能用在網(wǎng)站上。

Compass的編譯命令是

compass compile

該命令在項(xiàng)目根目錄下運(yùn)行，會(huì)將sass子目錄中的scss文件，編譯成css文件，保存在stylesheets子目錄中。

默認(rèn)狀態(tài)下，編譯出來(lái)的css文件帶有大量的注釋。但是，生產(chǎn)環(huán)境需要壓縮后的css文件，這時(shí)要使用--output-style參數(shù)。

compass compile --output-style compressed

Compass只編譯發(fā)生變動(dòng)的文件，如果你要重新編譯未變動(dòng)的文件，需要使用--force參數(shù)。

compass compile --force

除了使用命令行參數(shù)，還可以在配置文件config.rb中指定編譯模式。

output_style = :expanded

:expanded模式表示編譯后保留原格式，其他值還包括:nested、:compact和:compressed。進(jìn)入生產(chǎn)階段后，就要改為:compressed模式。

output_style = :compressed

也可以通過(guò)指定environment的值(:production或者:development)，智能判斷編譯模式。

environment = :development

output_style = (environment == :production) ? :compressed : :expanded

在命令行模式下，除了一次性編譯命令，compass還有自動(dòng)編譯命令

compass watch

運(yùn)行該命令后，只要scss文件發(fā)生變化，就會(huì)被自動(dòng)編譯成css文件。

更多的compass命令行用法，請(qǐng)參考官方文檔。

五、Compass的模塊

Compass采用模塊結(jié)構(gòu)，不同模塊提供不同的功能。目前，它內(nèi)置五個(gè)模塊：

* reset

* css3

* layout

* typography

* utilities

下面，我依次介紹這五個(gè)內(nèi)置模塊。它們提供Compass的主要功能，但是除了它們，你還可以自行加載網(wǎng)上的第三方模塊，或者自己動(dòng)手編寫(xiě)模塊。

六、reset模塊

通常，編寫(xiě)自己的樣式之前，有必要重置瀏覽器的默認(rèn)樣式。

寫(xiě)法是

@import "compass/reset";

上面的@import命令，用來(lái)指定加載模塊，這里就是加載reset模塊。編譯后，會(huì)生成相應(yīng)的css reset代碼。

七、CSS3模塊

目前，該模塊提供19種CSS3命令。在這里，我介紹其中的三種：圓角、透明和行內(nèi)區(qū)塊。

7.1 圓角

圓角(border-radius)的寫(xiě)法是

@import "compass/css3";

.rounded {

@include border-radius(5px);

}

上面的@include命令，表示調(diào)用某個(gè)mixin(類(lèi)似于C語(yǔ)言的宏)，5px是參數(shù)，這里用來(lái)指定圓角的半徑。

編譯后的代碼為

.rounded {

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-o-border-radius: 5px;

-ms-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

}

如果只需要左上角為圓角，寫(xiě)法為

@include border-corner-radius(top, left, 5px);

7.2 透明

透明(opacity)的寫(xiě)法為

@import "compass/css3";

#opacity {

@include opacity(0.5);

}

編譯后生成

#opacity {

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);

opacity: 0.5;

}

opacity的參數(shù)0.5，表示透明度為50%。

完全透明的寫(xiě)法是

@include opacity(0);

完全不透明則是

@include opacity(1);

7.3 行內(nèi)區(qū)塊

行內(nèi)區(qū)塊(inline-block)的寫(xiě)法為

@import "compass/css3";

#inline-block {

@include inline-block;

}

編譯后生成

#inline-block {

display: -moz-inline-stack;

display: inline-block;

vertical-align: middle;

*vertical-align: auto;

zoom: 1;

*display: inline;

}

八、layout模塊

該模塊提供布局功能。

比如，指定頁(yè)面的footer部分總是出現(xiàn)在瀏覽器最底端：

@import "compass/layout";

#footer {

@include sticky-footer(54px);

}

又比如，指定子元素占滿(mǎn)父元素的空間：

@import "compass/layout";

#stretch-full {

@include stretch;

}

九、typography模塊

該模塊提供版式功能。

比如，指定鏈接顏色的mixin為：

link-colors($normal, $hover, $active, $visited, $focus);

使用時(shí)寫(xiě)成：

@import "compass/typography";

a {

@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);

}

十、utilities模塊

該模塊提供某些不屬于其他模塊的功能。

比如，清除浮動(dòng)：

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函數(shù)

除了模塊，Compass還提供一系列函數(shù)。

再比如，inline-image()可以將圖片轉(zhuǎn)為data協(xié)議的數(shù)據(jù)。

@import "compass";

.icon { background-image: inline-image("icon.png");}

編譯后得到

.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

函數(shù)與mixin的主要區(qū)別是，不需要使用@include命令，可以直接調(diào)用。

(完)

總結(jié)

以上是生活随笔為你收集整理的matlab的compass怎么用,Compass用法指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。