sassCore在sass库中作为一个后来者,不可避免的要拿来和最具代表的compass做比较。当然这一方面是目前比较全面的sass库也比较少,而另一方面也说明sassCore其实也是有一定含金量的,不然烂的可以的话,也就不用去比较了。如果你还不了解sass,你可以先阅读下入门的sassGuide,然后可以进一步看下前三篇进阶教程sass揭秘系列。
在这我们先介绍下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还没有实现:
- compass提供安装版,sassCore暂时不支持。
- compass的css3渐变背景,对于ie9可以设置用svg来兼容,而sassCore没做到。来个实例吧,最后一个支持svg:bacground gradients demo。
- compass还有一个强大的自动合并雪碧图功能,确实很棒,sassCore也没有。你也可以尝试下spriting with compass。
其余的都是一些零碎的东西,可能compass有sassCore没有,也可能sassCore有compass没有,实现起来技术难度也没什么问题,没什么好说的。
当然有不足也有些长处,全是缺点的话,还搞个毛线,自己拍死得了,简单说下sassCore的一些优势:
- 总得来说,sassCore涵盖的范围比compass更广,能做更多基础的东西。
- 文件结构比较清晰,所以使用起来比compass要顺手点,而且扩展起来也比较方便。
- 有了%占位选择器,可以组合申明样式,这个东西是个乖乖仔,做到只调用的时候才解析出样式,不调用不产生任何样式。也许compass的下一步也会有这个东西。
- 吸收前面几个优秀的单功能文件,进一步扩展优化,在这些功能方面超越了compass对应的功能。
- 两种调用方式,一种产生基础样式调用
_base.scss
,一种只包括功能不产生任何多余样式调用_function.scss
。除此之外,基础样式里面还可以根据自己的需求,进一步减少多余样式。
大概就是这么多,优缺点可能都有点漏,也欢迎指正。大家可以根据自己的喜好或需求来选择使用哪个库比较好。然后sassCore库的api正在开发中,欢迎感兴趣的同学参加支持sass的推广,在此先表示感谢!
如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/sasscore-vs-compass.html