首頁 > web前端 > html教學 > 邂逅Sass與Compass之Compass篇

邂逅Sass與Compass之Compass篇

WBOY
發布: 2016-10-23 23:59:58
原創
1455 人瀏覽過

本文主要講解Compass的內容,眾所周知Compass是Sass的工具庫,如果對Sass不甚了解的同學可以移步邂逅Sass和Compass之Sass篇Sass本身只是一個“CSS預處理器”,Compass在它的基礎上,封裝了一系列的模組和模板,補充了Sass的功能。

1.Compass的安裝

和Sass一樣,Compass也是用Ruby語言開發的,所以在安裝Sass之前必須先安裝Ruby,安裝Ruby的過程就不再贅述,安裝好Ruby後可以直接在命令列輸入下面的命令

<code>sudo gem install compass
</code>
登入後複製

windows在cmd中輸入,但是要省略前面的sudo。

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

2.Compass初始化一個專案

接下來,要建立一個屬於我們自己的Compass項目,假定它的名字叫做learn-compass-init,那麼在命令列輸入

<code>compass create learn-compass-init
</code>
登入後複製

在目前的目錄下就會產生一個learn-compass-init子目錄(提示:windows玩家可以在需要建立的檔案中按住shift+滑鼠右鍵選擇在此處開啟命令列視窗)。

進入剛剛建立的子目錄

<code>cd learn-compass-init
</code>
登入後複製

你會看到如下結構,其中config.rb文件,是專案的設定檔。還有兩個子目錄sass和stylesheets,前者存放我們需要寫的Sass源文件,後者存放編譯後的css文件

3.Compass編譯一個專案

了解Sass的都知道,我們寫的後綴名為scss的文件只有編譯成css文件,才能用在我們的網站上,所以Compass提供了一系列的編譯指令。 在專案的根目錄運行如下命令

<code>compass compile
</code>
登入後複製

會將Sass子目錄中的後綴名scss檔案編譯成css文件,並儲存在stylesheets子目錄中。

有人會說修改一次scss檔就需要執行一遍compass compile太過麻煩,所以compass也提供了自動編譯指令如下

<code>compass watch
</code>
登入後複製

執行該指令後,只要scss檔發生修改,就會自動編譯成stylesheets子目錄中對應css檔。

預設狀態下,編譯出來的css文件會帶有大量的註釋,但是我們的只需要壓縮後的css文件,這時就需要使用如下命令

<code>compass compile --output-style compressed
</code>
登入後複製

4.Compass中的模組

Comapss採用模組結構,不同的模組提供不同的功能,我們在開發中可以按需來引入模組,下面我將著重講述一下各個模組的主要功能。

Compass內建了六大模組,其中包括如下

<code>-   reset
-   css3
-   layout
-   typography
-   utilities
-   helpers
</code>
登入後複製

Reset模組:是瀏覽器的重置模組,減少瀏覽器的差異性,即重置瀏覽器間的差異性。

Layout模組:提供了頁面佈局的控制能力,例如講一個容器內的子元素橫向縱向佔滿。

值得注意的是,只有Reset模組和Layout模組是需要明確指定引入的,即只要@import "compass" 就可以引入其他模組。

css3模組:提供了跨瀏覽器的css3的能力,相信你用過以後再也不會因為加瀏覽器前綴而頭疼不已。

Helpers模組:內含一系列的函數,跟Sass中的函數列表很像(用的很少但是功能很強大)。

Typography模組:修飾文字的樣式,垂直韻律。

Utilities模組:可以說Compass將沒有辦法放到其他模組的內容都放在這個模組裡。

其實Compass也提供了Browser Support的方法:它主要用於配置Compass預設支援哪些瀏覽器,對於指定的瀏覽器預設支援到哪一個版本,一旦修改就會影響其他六個模組的輸出,需要針對不同的瀏覽器做不同的適配。

關於各個模組使用辦法以及特色我將會在下面的文章中一一講述。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板