註* SASS: Syntactically Awesome Style Sheets，CSS擴展語言可編程樣式表）; 相關文章 LESS vs SASS？選擇哪種CSS樣式編程語言?
然而，大約壹年前，我就完全拋棄Compass了。我將把從我們的項目中刪掉。從我自己的網站中刪掉。從我身邊的項目中刪掉。到底發生了什麽？我是怎麽從"Compass是最好的"轉變到“我不需要它了”的呢？
起初我認為Compass是壹個比Sass更好的東西，直到認識到它其實並沒有帶來多大實惠。至少是還不值得將其引入到項目中，特別是Ruby Sass本身已經很慢了...
這裏我絕不是說Compass沒用。我也不是勸妳不要用。我只是想告訴妳不使用Compass時另外壹種做事方式。
我們先看看Compass有什麽功能：
瀏覽器前輟（-webkit, -moz等），基於CanIUse數據庫 (v1.0.0+);
數學計算函數助手，像cos, sin, pi等等;
顏色助手 像 shade, tint等等;
圖片助手像 image-width 和 image-height;
圖像切片自動合並編繹 。 註* 小圖合大圖減小連接請求
還有很多其它的附件
Autoprefixer沒什麽改進
在Compass 1.0.0之前，瀏覽器前輟是在Compass裏手動管理的。這意味著每產生或傳遞壹個新的前綴，都要拉壹次新的請求來刪除混入的前綴。不是很理想......這就是為什麽Chris在V1.0.0裏使用了壹種更聰明的方法，直接從CanIUse 提取數據。
同時，非常受歡迎的Autoprefixer
庫也能做這樣的事。在這壹點上，無論是Compass
還是Autoprefixer都能100%使用最新的瀏覽器前輟，但還有壹個重要的區別：在Compass中，妳仍然必須在屬性和值上加壹些前輟，而
Autoprefixer作為您部署過程的壹部分，隨後再處理樣式表。
為了輸出下面的CSS：
.unicorn { -webkit-transform: translateX(42em); -ms-transform: translateX(42em); transform: translateX(42em);}
使用Compass得這樣寫：
.unicorn { @include transform(translateX(42em));}
使用Autoprefixer插件：
.unicorn { transform: translateX(42em);}
後者不僅更簡單更短，而且不再需要transform的前綴屬性，這壹切都很好。
妳不會經常用到數學運算
我喜歡Sass為我們在樣式表中提供的數學運算的能力。當我們使用CSS的預處理時，我們可以在CSS中混入變量，對於以數字為基礎的CSS，但忽略數學的支持CSS來講，這是壹個巨大的進步。
最
重要的是，Compass提供了壹些先進的數學函數，如 cos, sin, tan, sqrt, pow, pi; 也許還有 acos,
asin, atan, log 運算和 e 常量。 在某些情況下，我不得不承認，此功能可能是有用的。例如，在以前的文章中，我使用的 cos 和
sin 打造完美的混合陰影。 前陣子， 我記得需要開方 sqrt 來正確地對齊和旋轉偽元素。因此，它們有應用情形。
然而，他們的應用場景是如此罕見，我不得不重新考慮Compass在項目中保留數學函數的充分理由，實現上這些函數都可以在但Sass被polyfilled實現。舉例來說，這裏是壹個純粹的Sass版的 pow 功能：
/// Power function/// @param {Number} $x/// @param {Number} $n/// @return {Number}/// @source /adambom/Sass-Math/blob/master/math.scss Sass-Math@function pow($x, $n) { $result: 1; @if $n >= 0 { @for $i from 1 through $n { $result: $result * $x; } } @else { @for $i from $n to 0 { $result: $result / $x; } } @return $result;}
如果妳趙的需要Sass中的高級數學函數，我建議妳參考壹下 Sassy-Math。
您可以自己實現顏色函數
說實施，我對Compass 的顏色函數 不是非常的熟悉，因為我從來沒有使用過其中任何壹個功能。不過Compass提供了如此多的內置函數來處理顏色，我從來沒有感覺有多少的需要。
下面有個例子。在CSS中實現漸變。為了讓使用 mix 稍微容易點，我寫了兩個很短的函數，他們在Compass中是被實現了的。
/// Slightly lighten a color/// @access public/// @param {Color} $color - color to tint/// @param {Number} $percentage - percentage of `$color` in returned color/// @return {Color}@function tint($color, $percentage) { @return mix($color, white, $percentage);} /// Slightly darken a color/// @access public/// @param {Color} $color - color to shade/// @param {Number} $percentage - percentage of `$color` in returned color/// @return {Color}@function shade($color, $percentage) { @return mix($color, black, $percentage);}
無論如何，我不認為Compass有必要專門提供這些。
妳可以不依賴圖片工具
讓我們來看壹看有用的東西。Compass它是用Ruby編寫的，提供的圖片助手可以自動計算出類例image-width和image-height這樣的屬性。這是很實用的，特別當妳需要替換圖片時，妳無需擔心尺寸發生變化。
.logo { $logo-path: '/assets/images/logo.png'; width: image-width($logo-path); height: image-height($logo-path); // ...}
不幸的是，我們沒有辦法寫polyfill兼容函數來自己實現。Sass無法訪問文件系統，因此無法任何弄清楚的圖像尺寸。
話雖這麽說，我個人傾向於使用SVG並在項目中並盡量地少使用圖片。由於SVG是可縮放的矢量圖形，我不需要關心它的尺寸。我已經使用好長壹段時間了。
SVG Sprite有壹大波自動合並的工具
好了，現在我們談論Sprite Build，它壹直是Compass的主要亮點，從文件夾中將小圖標自動合並，並創建CSS Sprites只需要壹兩分鐘，也許更少。
@import "compass/utilities/sprites";
@import "my-icons/*.png";
@include all-my-icons-sprites;
在我們的樣式表中自動創建CSS Sprite還有很多其他的選擇。按照同樣的思路，只用Compass的Sprite工具，我會覺得很奇怪，不管它有多好。沒有必要將二者緊密聯系在壹起，即使它可能帶來壹些好處。
註* 參見 CSS Sprite小圖片自動合並工具（NodeJS,Python,Java,Ruby）
關於LibSass的壹句話
Compass與LibSass 是不兼容的。因為它仍然在很大程度上依賴於Ruby，妳不大可在壹個“LibSass環境”使用Compass。在當今世界，LibSass越來越被認同，我認為與語言無關是壹個主要的目標。顯然，Chris也認同這壹點，它正在將它移植到LibSass中。
註* LibSass:讓Sass擴展樣式表語言脫離Ruby框架的依賴，而變成壹個可以被方便引用的庫。