本文主要講解Compass的內容,眾所周知Compass是Sass的工具庫,如果對Sass不甚了解的同學可以移步邂逅Sass和Compass之Sass篇Sass本身只是一個“CSS預處理器”,Compass在它的基礎上,封裝了一系列的模組和模板,補充了Sass的功能。
和Sass一樣,Compass也是用Ruby語言開發的,所以在安裝Sass之前必須先安裝Ruby,安裝Ruby的過程就不再贅述,安裝好Ruby後可以直接在命令列輸入下面的命令
<code>sudo gem install compass </code>
windows在cmd中輸入,但是要省略前面的sudo。
正常情況下,Compass(連同Sass)就安裝好了。
接下來,要建立一個屬於我們自己的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文件
了解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>
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預設支援哪些瀏覽器,對於指定的瀏覽器預設支援到哪一個版本,一旦修改就會影響其他六個模組的輸出,需要針對不同的瀏覽器做不同的適配。
關於各個模組使用辦法以及特色我將會在下面的文章中一一講述。