960 Grid System. 用 Compass 寫 CSS. 最近在開發一個新產品，整體來說應該是接近寫完了，不過越接近完工，抓 IE 系列的 bug 就越是挫折。 朋友 @evenwu 就來洗我要不要換成 Compass，說這東西超神奇，超好用，還可以把 IE bug 殺光光！ 其實之前就久仰 Compass 大名了，只是文件實在看起來太他媽的眼花繚亂，因為專案進度一直在跑，不太敢貿然換掉寫 CSS 的方式。 而且怕配合的網頁美術跟不上。 後來某天解票實在解到太賭爛了，下班後就花了一兩個小時摸這個東西，一用就驚為天人！ Compass = Sass framework powered by community。 據 @hlb 用地球語解釋，programmer/designer 用了以後就不需要用知道怎麼做 haslayout/clearfix 的神器！ Compass based on Sass。 用 Sass 開發有什麼好處呢？ 1. 試寫過一輪以後超 high 的，本來卡在現有 CSS 已經一兩千行，重寫成本很高，沒想到 @hlb 又跟我說有 sass-convert （gem install sass –pre）這東西，我又更 high 了….馬上就開一個 branch 一口氣把 CSS 轉好。 至於 Rails 整合更方便，Compass 有直接整合 Rails 的 Solution。 Ruby (Web) Developer 真是太幸福了…. btw ，雖然 Compass 與 Sass 都是 Ruby 寫的，但如果你是用 Python 或 PHP 還是可以搭啦。 — update: @hlb 說 請愛用 sass alpha 跟 compass beta , 記得愛用 @extend, 少用 @include. 960 Gridder - Lay out websites with ease.
What is this? 960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites. The idea came when designing a website for a student organization where I worked with several designers that handed their lay outs and designs in Photoshop format with a similar grid built-in to me. After a while I noticed how hard it became to make sure everything looked exactly how they intended it, especially in the different browsers. 960 Gridder is cross-browser compliant and works well in Internet Explorer 6/7/8, Firefox 2/3 and Chrome. Safari 4 Beta and Opera 9 is also working as expected and it should work in Safari 2.x-3.x also.
According to browsershots, all A-grade browsers now display the grid perfectly (version 1.3.1). How does it work? 960 Gridder is built upon the very famous JavaScript framework jQuery. 960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it. Where do I use it? Note! Compass Home | Compass Documentation. Compass.app. 你是網頁設計師嗎，當你寫 css 時是否常常頭暈目眩、眼神渙散、注意力無法集中呢？ 是否常常因為重複的原始碼搞的心情浮躁、焦慮不安？ 還是會為了層層結構問題落的精神崩潰、夜夜失眠的下場？ 沒關係，今天就要為大家介紹一款全新的必殺配備 - Compass.app 應用程式。 Compass.app 是為設計師所設計的工具，在撰寫網頁風格程式碼時，可以用較強力的 Sass 語法（是種可延伸的 CSS），來更有效率地完成工作。
沒~~錯！ 好吧，叫賣完畢，這麼好用的工具不買是你的損失。 備註：原生 Compass 是一套需要 Ruby 環境以及依靠指令的工具，這對視覺設計師頗具門檻，為了能跨平台以及介紹給更多設計師，所以 和多 將 compass 包成一套桌面的應用程式方便使用。 前置作業 Compass.app 延伸應用原理用的是 Sass ，用 Dreamweaver 寫 css 的話最好先讓 Dreamweaver 看的懂 Sass。 開啟 ，搜尋關鍵字 css 找到 ，然後改成 即可。 建立 執行 compass-app.exe 後在工具列點 compass 小圖來建立專案資料夾 此時 Compass.app 會建立應用的相關檔案並 Watching 此資料夾，Watching 的用意在於針對此資料夾的 scss 檔案進行 compile 成為 css，而 scss 就是日後編輯練功之地。 編輯 screen.scss 存檔後 Compass.app 就會自動生出 screen.css 供網頁使用 為了避免每次開新專案都要做一次個人習慣的前置作業環境，因此日後比較了解 Compass.app 後可以先建立個人的 folder，新專案開始只要複製一份進行 Watching 就可以開工了。 輔助工具 因為 sass 與 css 的程式碼行數並不對應，用 Firebug 查問題不太方便，裝了 Firesass 後就可以直接觀看 sass 原始碼找問題。 備註 Compass.app 源自於 Compass ，而 Compass 源自於 Sass 再加進許多強大功能而成。 HTML 吃的一樣還是 css，不是 scss。 編輯 scss 後要存檔讓 Compass.app 進行 compile，生出 css 後頁面上才看的到結果。 在 scss 中一樣可以納入一般的 css 沒問題。 應用 巢狀結構（Nesting）