sassCore 一个值得你拥有的 Sass 库 - 文章教程

sassCore 一个值得你拥有的 Sass 库

发布于 2021-08-30 字数 3969 浏览 813 评论 0

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

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

sassCore 是怎么产生的?

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

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

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

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

如果你仔细研究下,这些文件一定程度可以媲美 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。除此之外,基础样式里面还可以根据自己的需求,进一步减少多余样式。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

21 文章
1 评论
23922 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0