sassCore 一个值得你拥有的 Sass 库

Question

sassCore 在 sass 库中作为一个后来者，不可避免的要拿来和最具代表的 compass 做比较。当然这一方面是目前比较全面的sass库也比较少，而另一方面也说明sassCore其实也是有一定含金量的，不然烂的可以的话，也就不用去比较了。

在这我们先介绍下 sassCore 产生的背景。

sassCore 是怎么产生的？

设计这个 sassCore 绝不是闲得蛋疼去重复造轮子，也不是一时手痒来挑战下自己的技术，它的出现完全在我的计划范围之外。

原先的计划是做一个样式库，然后加上js交互就组成一个框架。因为那个时候接触sass也一段时间了，了解了它能创造的一些价值，所以果断使用sass，而不是纯css来构造。原本是打算用compass这个作为基础的，于是花了一段时间去研究。然后发现它的一些弊端：

• 文件关系比较复杂，有点晕乎，这太要命了。
• 到处都是@mixin，太多了有点过，开发的时候几乎记不住这么多@mixin。
• reset样式有点过时。
• 最关键的一点是居然没有%这个占位选择器，也就意味着样式都是拷贝存在的，这太不科学了。

当然在研究compass的时候也看了很多其他的一些sass方面的资料。在此也感谢大漠，这期间有什么国外sass方面的文章都给我传送下，从中吸取了不少养料。通过众多的翻阅，下面这些资源给了我很大的帮助及灵感，并让我迅速成长，甚至sassCore里面的某些文件就是它们的影子。

• normalize.scss：大名鼎鼎的 normalize 的 sass 版本
• sass-mediaqueries：media-queries 的 sass 版本，响应式布局必备
• bourbon：这个就是很强大的负责处理css3前缀的sass库
• Blankwork-Flexible-SASS-Grid-System：网格布局的 sass
• bootstrap-sass：这个就是 bootstrap 的 sass 版本。

如果你仔细研究下，这些文件一定程度可以媲美 compass，甚至超越了compass的相应功能，但是它们有个缺点，就是只负责一方面，功能单一，当然下面的那个bootstrap就不是单功能方面的了。

正是有了这么多优秀的scss单功能文件，让我有了放弃compass的理由。一开始我也是零碎的调用，想用什么然后就调用上面的那些单文件，后来写了点demo之后，发现这样太蛋疼了，干脆有了想法依托于这些优秀的单文件自己搞个库，跟compass一样。然后就规划这个库要实现什么功能，如何组织起来。于是又重新研究bootstrap-sass和compass，边写边调整，慢慢的才有了现在的sassCore。

sassCore 与 compass 比较

先说下 sassCore 对于 compass 的不足吧。目前 compass 的三点，sassCore 还没有实现：

1. compass 提供安装版，sassCore 暂时不支持。
2. compass 的 css3 渐变背景，对于ie9可以设置用svg来兼容，而sassCore没做到。来个实例吧，最后一个支持 svg：bacground gradients demo。
3. compass 还有一个强大的自动合并雪碧图功能，确实很棒，sassCore也没有。你也可以尝试下 spriting with compass。

其余的都是一些零碎的东西，可能compass有sassCore没有，也可能 sassCore 有 compass 没有，实现起来技术难度也没什么问题，没什么好说的。

当然有不足也有些长处，全是缺点的话，还搞个毛线，自己拍死得了，简单说下 sassCore 的一些优势：

1. 总得来说，sassCore涵盖的范围比compass更广，能做更多基础的东西。
2. 文件结构比较清晰，所以使用起来比compass要顺手点，而且扩展起来也比较方便。
3. 有了%占位选择器，可以组合申明样式，这个东西是个乖乖仔，做到只调用的时候才解析出样式，不调用不产生任何样式。也许compass的下一步也会有这个东西。
4. 吸收前面几个优秀的单功能文件，进一步扩展优化，在这些功能方面超越了compass对应的功能。
5. 两种调用方式，一种产生基础样式调用_base.scss，一种只包括功能不产生任何多余样式调用_function.scss。除此之外，基础样式里面还可以根据自己的需求，进一步减少多余样式。