我為什么不再用Compass寫CSS（缺點分析）
Compass 是一個糟糕的項目。目前最大的Sass框架，它目前由Chris Eppstein自己維護，兩個Sass核心設計者之一，目前它仍然十分流行。
注* 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);}</pre>
使用Compass得這樣寫：
.unicorn {@include transform(translateX(42em));}</pre>
使用Autoprefixer插件：
.unicorn {transform: translateX(42em);}</pre>
后者不僅更簡單更短，而且不再需要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}/// @sourcehttps://github.com/adambom/Sass-Math/blob/master/math.scssSass-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;}</pre>
如果你趙的需要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);}</pre>
無論如何，我不認為Compass有必要專門提供這些。
你可以不依賴圖片工具
讓我們來看一看有用的東西。Compass它是用Ruby編寫的，提供的圖片助手可以自動計算出類例image-width和image-height這樣的屬性。這是很實用的，特別當你需要替換圖片時，你無需擔心尺寸發生變化。
.logo {$logo-path: '/assets/images/logo.png';width: image-width($logo-path);height: image-height($logo-path);// ...}</pre>
不幸的是，我們沒有辦法寫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工具，我會覺得很奇怪，不管它有多好。沒有必要將二者緊密聯系在一起，即使它可能帶來一些好處。
關于LibSass的一句話
Compass與LibSass 是不兼容的。因為它仍然在很大程度上依賴于Ruby，你不大可在一個“LibSass環境”使用Compass。在當今世界，LibSass越來越被認同，我認為與語言無關是一個主要的目標。顯然，Chris也認同這一點，它正在將它移植到LibSass中。
注* LibSass:讓Sass擴展樣式表語言脫離Ruby框架的依賴，而變成一個可以被方便引用的庫。
最后的思考
遠離Compass，你真正想要的東西應該是比較簡單的。如果你真的需要Compass的小工具，你只需要加一些Sass的函數即可。然后，在項目中引用Autoprefixer甩掉所有的CSS樣式前綴。最后，引入一個自定義的Sprite圖片自動合并工具。
其實，Compass并不是一個壞的工具。恰恰相反，Compass是一個了不起的框架！如果你對Compass非常滿意，請繼續堅持使用。
另外，如果你使用的不太多的話，那么你可以考慮擺脫它，像我一樣。
原文地址： sitepoint.com
來自：http://ourjs.com/detail/54ed5397232227083e000035本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！