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);}
使用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 https://github.com/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框架的依赖，而变成一个可以被方便引用的库。
我不得不承认，CSS非常棒，但是缺省的语法绝对的烂。你是不是也厌倦了CSS的书写方式呢？特别是当项目越来越大，代码堆积越来越多的时候。如果我们还是继续这种愚蠢的编码方式，那么对于CSS开发的人员来说。绝对是一个不省心的工作！
而当CSS编译器真正来到的时候，完全改变了我们的工作方式。今天我们将要讲解使用CSS编译器的诸多好处并且介绍你如何能够真正在工作中有效使用它。
Time to keep it simple, no time for the stupid!
会议一下作为前台开发人员，你写过多少次这样的代码?
ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }
或许你也感叹过，我到底要写多少个ul li阿？ 真是无用功！
没错，的确是！
那么对于颜色，字体大小，或者margin/padding这些在CSS中随时重复的东西。试想一下，你如果想修改一些东西，确发现，你要修改的东西到处都有。这样情况大家都遇到过！绝对是噩梦！
你的样式表里的样式呢？是不是已经厌倦了老是使用同样的样式？修改样式？兄弟，这可不是简单的活儿！
怎么去解决这样的问题呢？ SASS！
编译CSS？什么？没搞错吧？
不要大惊小怪！如果你不是一个熟悉终端的开发者，或者说是windows中的cmd。那么这里有很多的解决方案可能让你放弃选择终端来管理项目。不过这里让我们退一步说。
SASS赋予你修改你的CSS并且生成真正的CSS文件的能力。简单说来，它就是察看SASS文件，并且生成正确的CSS文件。
那么，如果你需要修改CSS，那么你就使用命令通过SASS文件来直接生成CSS文件。一旦你保存了SASS文件。就不需要管理CSS文件了。因为只需要花几秒，你就能生成需要的CSS。当然你需要时间来熟悉这些，不过对于开发来说，绝对值得！
样式嵌套
首先最让我喜欢的SASS和SCSS的地方在于语法拥有样式嵌套。这使得和你的样式结合使用起来非常的简单。例如，你有如下HTML：
link 1
link 2
在SASS中，你将能够书写如下结构：
ul {
padding: 0px;
margin: 0px;
width: 210px;
li {
float: left;
width: 100px;
margin: 0px 10px 0px 0px;
&.last {
margin: 0px;
}
a {
color: #232323;
&:hover {
color: #121212;
}
}
}
}
是不是非常的清楚？ 最后你可以使用HTML里方式来嵌套你的CSS。你可以使用任何CSS选择器来使得流程更加简单！
我同样也添加了一些在SASS中经常使用的很多不错特性: "&" 标号。这个将告诉SASS来设定一个额外的规则。因此使用class .last定义的li元素将使用这个方法。不用去创建一个新的规则。悬浮的anchor标签也同样使用这个方法。非常实用！
变量，Mixin和选择器继承
样式代码片断的重用使得CSS非常的动态，这也是SASS最擅长的。
变量很简单。定义并且使用在你的SASS文件中：
$background: #040404;
$text-color: #fefefe;
$standard-margin: 16px;
body {
background-color: $background;
color: $text-color;
input {
background-color: $background;
color: $text-color;
margin: $standard-margin;
}
}
定义了一个变量$varname：value并且在代码中使用$varname。
Mixin有点儿像变量但是主要为了样式片断。你可以告诉SASS冲用一部分的代码片断并且包含在样式里。你甚至可以指定参数使得他们动态。就像你给CSS写方法一样。
@mixin ptsans {
font-family: 'PT Sans', sans-serif;
}
@mixin absolute-positioned($top, $left) {
position: absolute;
top: $top;
left: $left;
}
body {
@include ptsans;
position: relative;
#notifier {
@include absolute-positioned(20px, 100px);
}
}
使 用@mixin mixinname{这里写样式}来定义一个mixin ，或者使用@mixin mixinname($parameter1){somestyle:$parameter1}。非常适合重复的样式和CSS3的fallback内容。 你可以添加很多的样式到mixin里然后很方便的重用。
最后要说的是selector继承。这允许你像mixin那样取得一段样式，并且继承扩展它。这样你可以在实际的CSS中放入同样的代码，但是扩展CSS规则。这里举一个例子：
CSS源代码：
.error, .succes {
border: 1px solid black;
padding: 5px;
color: red;
}
.succes {
color: green;
border-color: green;
}
SCSS：
.error {
border: 1px solid black;
padding: 5px;
color: red;
}
.succes {
.error;
color: green;
border-color: green;
}
是不是简单明了。
内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024