Compass 是寫 Sass 非常好用的一個工具，但最近開始嘗試將 Compass 從專案中抽離。原因我想網路上可以找到很多，其中不外乎是環境以及效能問題。
在系統環境上如果要執行 Compass 的話必須先安裝 Ruby，然後才能透過 gem 安裝 Compass。這對於本來就用 Ruby 做為後端系統來說並不是什麼太大的問題，但對於非 Ruby 的後端來說 (ex: PHP, Node.js...)，為了這樣一個套件，需要再額外安裝 Ruby 的環境是有一點麻煩。
另外就是效能問題，Sass 最早是從 Ruby 底下誕生的，所以只能在 Ruby 的環境中編譯並不太意外。但後來出現了 LibSass 這個純粹用 C/C++ 寫的 Sass 編譯器，效能上整個就是打趴 Ruby，在 Node.js 環境下也可以用 node-sass 來整合到專案中。
於是這幾個理由構成了我想替換 Compass 的主要原因。但是 Compass 實在提供太多好用的功能了，想要完全抽離需要下一番功夫。以下就我最常使用到的幾個功能來分析。
Compile Sass to CSS
如上所述，改用 node-sass 做編譯。因為 node-sass 本身就是 npm 的 module 所以整合到 grunt/gulp 中也很容易。CSS 壓縮的話，因為個人 workflow 的關係也並沒有直接使用 Compass 將 CSS 壓縮，而是另外使用 cssmin 的工具。
Vender Prefixes
Compass 內建許多好用 mixin 來協助開發，其中最常用的應該就是各種 CSS3 的 vendor prefix，讓瀏覽器可以無縫接軌 CSS3 語法 (ex: border-radious, transition...)。但是隨著瀏覽器版本的更新，現代瀏覽器對於 CSS3 的支援已經越來越高，許多 prefix 也不需要再特地加上去，多餘的 vendor prefix 反而對檔案大小來說是種負擔。
抽離 Compass 之後把這工作交給 Autoprefixer 這個 postprocessor 可以說是最好的選擇。Autoprefixer 會根據 Can I Use 的相容性列表來決定要加入哪些 vendor prefix，並且也可以自訂哪個瀏覽器要向下相容幾個版本，相對 Compass 來說具有更良好的彈性。
Sprites
上述兩項算是較為簡單的功能替換，而 sprites 算是個人認為最麻煩的部分。使用 Compass 做 sprites 很簡單，把圖片丟到指定的資料夾中，Compass 會自動將圖片組合並產生對應的 Sass 樣式，更重要的是圖片檔名還會自動加上 hash。單獨做 sprites 的工具很多，但要把 Compass 的工作完全無縫接軌過去其實並不簡單。在試過幾種工具之後，目前比較喜歡用 spritesmith，提供的操作比較全面。但是要完全做到跟 Compass 一樣，尤其是要對圖片檔名加上 hash 這件事會比較麻煩一點，可能要另外寫一篇來說明如何達到這件事。
Susy
最後要提到的就是在 Compass 上一些好用的工具，其中最常被用到的應該就是 Susy 這個寫 grid 非常好用的工具。最早 Susy 是相依於 Compass 中的，所以想要用 Susy 開發的話就必須搭配 Compass 來使用。不過現在官方也出了其他的 solution，包含可以用 bower 安裝，甚至是直接 import Sass 檔。可以根據自己習慣的 workflow 來選擇搭配的方式，因此從 Compass 中抽離就再也不是問題了。
實際上在整合可能還會遇到其他問題，這就要視每個人在使用 Compass 時用得多深了，但是我相信每個功能應該都有其相對應的解法。當然若是覺得這些替代方案的成本太高，繼續使用 Compass 也是一個合理的選擇。