• 首页
  • 产品中心
  • 企业荣誉
  • 业界新闻
  • 汽车服务
  • 产品中心

    你的位置:【开元棋盘地址官方客服】 > 产品中心 > 承上启下的 Sass 3 代编译器:Ruby Sass、Node

    承上启下的 Sass 3 代编译器:Ruby Sass、Node

    发布日期:2022-08-07 03:48    点击次数:122

    为了简化款式的形貌,阅读器策画了 css 作为 DSL(规模特定言语)。css 写起来俭朴,但在良多方面都不太方便,比喻不支持嵌套,代码相比冗余;不支持继承和混淆,代码不好复用等。

    为了给 css 扩张代码构造和静态计算的才能,社区出现了一些编译为 css 的预处理惩罚言语,比喻 sass、less、stylus 等。

    其他,另有 postcss 这类后处理惩罚器,它是从 css 编译到 css,编译的进程中做种种阐发和转换。

    less、stylus 的编译器都是 js 写的,而 sass 就相比不凡了,3 代编译器都不是 js 写的。

    来日诰日,我们就来聊下 sass 的历史:sass 的 3 代编译器。

    ruby sass

    sass 开始是 2006 年由 ruby 开发的,作为和它 web 框架的模版引擎 haml 配套的编写 css 的言语。因为相比好用,所之前端也都在用。

    sass 编译器是用 ruby 开发的,而 ruby 是一门说明型言语,所之前端开发想编译 sass 就需求在外埠按部就班 ruby。

    其后,Node.js 的出现推动了前端工程化的倒退,也就是用 Node.js 来写前端用的编译打包等器材链。而 Node.js 只支持 c++ 这类编译型言语的扩张包,ruby sass 就用不清晰,所以出现了 node-sass。

    直到 2019 年 3 月,ruby sass 颁布揭晓再也不回护,sass 开始的编译器退出历史舞台。

    node-sass

    里用 c++ 完成为了 sass 的编译器,叫做 LibSass,和 node 做了集成,就是 node-sass 这个包。

    固然,它同样也可以和其它言语集成,比喻 go、java 等。

    node-sass 让我们可以或许在 Node.js 里经由过程 api 来编译 sass 代码,顺应了前端工程化的大潮流。

    而且 node-sass 是用 c++ 写的,编译速度比 ruby sass 快良多。

    只不过,node-sass 由是以一个 c++ 模块,所以按部就班的时光要和 node 版本对应,不然就会编译报错,这点相比麻烦。

    在 github 可以或许查到 node 和 node-sass 的版本对应纠葛: 

    node-sass 看起来挺不错,编译速度快,支持 Node.js 调用。诚然要留心下和 node 版本的对应纠葛,但成就不大。

    然则,node-sass 已经被标记为逾期了,这意味着它也会逐步退出历史舞台。

    为何呢?

    主若是因为回护速度跟不上了。

    就像 TS 是 JS 的超集同样,SASS 也是 CSS 的超集。超集意味着 TS Compiler 要支持 JS 的种种新语法,SASS 也要支持 CSS 的种种新语法,在这个基本上再迭代自身增加的那些语法。

    SASS 团队的两个次要回护者感到自身支持 CSS 新特点的速度跟不上了,而且社区出现了 dart-sass 这个对 css 新特点支持更好的 sass 编译器,随着时光的推移,CSS 新特点支持上差距越来越大。终究,产品中心在 2020 年 10 月份,node-sass 颁布揭晓了再也不延续支持新特点,标记为了逾期,推选运用 dart-sass。

    在 node-sass 博客上有这样一段话,展现了他们的无奈:

    颠末 Sass 焦点团队的屡次探究,我们得出的结论是,是时光正式颁布揭晓 LibSass 和基于它构建的包(蕴含 Node Sass)已被弃用。几年来,很分明 LibSass 迎面基本没有足够的工程带宽来使其与 Sass 言语的最新倒退对立同步(譬如,最新的新言语功用是在2018 年 11 月增加的)。尽管我们停留看到这类情势发生扭转,但纵然是长岁月 LibSass 贡献者 Michael Mifsud 和 Marcel Greter 的精彩事变也无奈跟上CSS和 Sass言语开发的倏田地调。

    就这样,node-sass 也算是推出了历史舞台,然则它对前端工程化的贡献是不成消散的。

    我们再来看下 sass 编译器的继任者:dart-sass。

    dart-sass

    dart-sass 毫无疑问是用 dart 来写的 sass 编译器。dart 是 flutter 的编程言语,可以或许编译为 js,所以它供应的 npm 是 js 的,不需求像 node-sass 同样和 node 版本有绑定纠葛。

    下载后的 npm 包可以或许看到 一个 sass.dart.js,这个就是用 dart 编译进去的:

    因为 dart-sass 的 npm 包的编译是用 js 做的,速度上会比 node-sass 慢,然则它次要胜在对 css 的特点支持的全,而且由是以 js 包,按部就班很方便。

    dart-sass 代表着未来,也是被平易近间推选的 sass 编译器。

    三代 sass 编译器

    介绍完了三代编译器,我们来俭朴做下追念:

    ruby sass 是开始的 sass 编译器,用 ruby 写的,所以不克不迭被 node 调用,然则它是创始者,历史功绩列第一位。只是需求按部就班 ruby 来执行,相比麻烦。

    node-sass 是顺应前端工程化潮流而出现的 node 包,是对用 c++ 完成的 sass 编译器 LibSass 的封装。因为用 c++ 编译,所以速度更快。供应了 Node.js 的 api,支持了前端工程化的大潮流。历史功绩列第二位。只是需求 node-sass 和 node 版本的对应相比麻烦。

    dart-sass 是用 dart 完成的 sass 编译器,供应的 dart-sass 的包是 js 的,由 dart 编译而来。益处是对 css 新特点支持的更全,而且也没有和 node 版本的绑定纠葛。

    ruby sass 和 node-sass 都已经是历史,dart-sass 是 sass 编译器的未来。

    总结

    css 缺乏代码构造才能和静态计算才能,所以社区出现了一些 css 预处理惩罚器:sass、less、stylus。

    less、stylus 的编译器都是 js 写的,最不凡的是 sass,它的三代编译器划分是 ruby、c++、dart 写的,都不是 js。(这点在工程化规模也很不凡,js 的编译器都是从 js 逐步倒退到 rust、go 等其它言语,而 sass 的编译器是从其它言语逐步切回到了编译成 js 的言语)

    ruby sass、node-sass 都曾颠末时了,然则它们对前端工程化的贡献不成消散,dart-sass 代表着 sass 编译器的未来,停留它能接过前辈们的接力棒,承上启下,做的更好吧。