MUKI space*

老實說，我一直很排斥blueprint, sass, compass這種非CSS正統格式的快速工具。擁護者常會說他們很快速、方便，而且可以幫你把hack全部處理完，還可以有效簡化流程balabala一堆，但對我來說，我還是喜歡自己慢慢刻的那種成就感，而且Compass所產生出來的css讓我覺得非常的髒，註解一堆，也不是按照我所愛的編排習慣。

但，我還是開始碰觸Compass了...。大概有10%原因是受到這張比較圖的影響▼

甚麼!!Compass居然自居是武裝過後的CSS!!!
基於好奇探究，也基於工作上的需要(其實主因80%是工作關係OTL)，所以我決定來玩玩Compass。

在使用Compass之前，我一直很怕用習慣後，會忘掉正統的CSS寫法。幸好目前寫了三、四行，還沒忘記原本的....。那麼剩下10%使用Compass的原因，是想挑戰自己。

人活到一個階段，會開始抗拒學習新事物，變得比較沒有挑戰性、墨守成規。老實說，我不想變成這樣的人，我也害怕自己變成這樣子。雖然我一開始不能接受Compass，但是，為什麼我要抗拒它呢？雖然我擁護著正統的CSS，但我還是可以學習改良過後的Compass，正所謂知己知彼，百戰不殆嘛！

然後...，從安裝開始就是一條艱辛的路途，因為國內使用Compass的人不多，加上沒有人從頭到尾去寫教學，所以我決定自己寫一篇，給那些想玩Compass卻不知從何玩起的朋友一個參考。

甚麼是Compass

簡而言之，就是另外一種撰寫CSS的方式(工具)，簡單舉例幾個我覺得還不錯的特色(我非程式評測背景出身，所以不談數據理論，只說我自己的感想)：

【1.解決瀏覽器不相容:】
這我還沒實際用過，但聽說Compass可以幫你解決瀏覽器不相容的問題。也就是說，你不用再開每個瀏覽器在那邊看哪裡跑掉，然後針對跑掉的部分寫hack，慢慢地去刻。只要在Compass寫上幾行語法，他就可以自動幫你產生相關hack。(但不是所有的hack)

【2.簡化css代碼：】
Compass透過一種「全域變數」的邏輯，可以有效簡化CSS代碼。比如今天在很多class都用到"紅色"，Compass可以讓你只要修改一次，就可以把所有紅色都取代掉。
可以在style文件最前面寫上:

$red: #ff0000

class裡頭：

a {
color: $red;
}

.h1 {
color: $red;
}

往後只要改 $red: #ff0000，就可以全部替換掉了。

【3.會幫你除錯】
因為要把compass檔案轉成css時，會先經過compile(編譯)，compile的過程中，有問題就不會讓你過，會告訴你哪裡有錯。(是不是很有按下.net三角形icon的FU...，發明Compass的人一定是程式面出身的!!!)

【4.自動幫你補完CSS3語法】
假設今天要寫一個圓角效果，因為要考慮每個瀏覽器的相容模式，所以我們至少會寫三行：

img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

但是你在compass只要寫

img
+border-radius(5px)

就好了!!
當然，前提是要import一些設定檔進來，有興趣的朋友可以直接參考Compass官網給的範例。

關於Compass的優勢，大致上我比較注意的就是這些，聽同事說還有CSS Sprite的設定簡化，但我還沒研究，所以就不贅述了。

如果看到這，還有興趣的話，就一起來安裝Compass吧!!

Compass安裝使用目錄

1. 前言
2. 安裝Compass與建立專案
3. 嘗試開始寫Compass
4. 後記