認識 Compass

Compass = Sass framework powered by community

Compass是基於 Sass 下整合起來的 CSS 產生工具,很常見於Ruby on Rails裡頭,它是能透過 RubyGems 產生出實用的 CSS 檔案,在設計師開發 WebApp 時為了要能相容不同的 WebBrowser 所顯示的版面之外,也能方便除錯,節省相當的設計時程與除錯時間,是個非常好用的工具。

特別是除錯,時常因為Style相間的相容性狀況讓特定的Browser產生跑版的情形,所以就要花時間除錯。

而什麼是 Sass?
Sass 的作用是讓開發者可以用巢狀和寫程式的方式去撰寫 CSS。

引用Xdite大大的使用心得,由此可見Compass是非常強大的CSS設計與管理工具。

  1. Sass 因為是以巢狀方式撰寫,再行 compile 成 CSS,所以不會再有 style 打架的問題
  2. 寫錯(括號沒關, 色碼打錯字並不存在…等等)的話,Sass 會直接 compile 不過,註明第幾行 syntax error 或 color error …。 (就不會發生找半天, 開了一堆 browser 還測不到靈異現象的原因)
  3. Compatible CSS,所以舊的 style 直接貼上去也是沒問題的!
  4. 內建許多的 mixin,例如我最近在寫漸變顏色的效果,為了支援各家瀏覽器,我總要囉唆的寫上三行 CSS
  5. 可以寫自訂的 mixin,上面的 mixin 不支援 IE,所以我還自己再寫了一個支援 IE 版,然後再 mixin 一遍。以後我要寫漸變色,就只要 @include my-linear-gradient(white, #cff2ff); 填入色碼就收工了。
  6. community-based,意思是你可以去 github,找一堆人家寫好的一堆噁心超炫的特效,想用直接 include 就收光了,不必辛苦寫老半天!(如Fancybuttons)
  7. 公司超省力,只要大家 html 和 sass 規則定好,以後做版不必再 ie hack 老半天(只要有人解過了就可以 include 來用)。一堆 RD 和一堆視覺設計師不需要再擔心誰跟誰搭有 style 不同的問題….。甚至視覺設計師以後只要專心做版即可,要是不小心 float 到爛掉就叫它直接 include self clear 就收工。
  8. 至於 Rails 整合更方便,Compass 有直接整合 Rails 的 Solution。討厭自己一直手動 compile,也有 compass watch,會一直幫你重新 compile。還有搭配的 gem 幫你解決掉部署問題。

這是關於 Compass.app 官方的介紹畫面:

這次RubyConf Taiwan 2011 中 Compass 作者 Chris Eppstein 也有來介紹他的軟體唷!

Compass官方網站:http://compass-style.org/
Sass 官方網站:http://sass-lang.com/

Related Posts Plugin for WordPress, Blogger...

Leave a Reply