预处理器

Thu, 10 Oct 2024 00:00:00 +0800

前言

花样不断的前端，貌似多技术方案并行，已经成了家常便饭。

从大的框架开始，已经分裂react与vue派系。两者思维上虽然有相互不断的借鉴，但在大的方向思维上却是截然不同。而在react与vue的竞争以及相互较量的过程中，往往把其他的对手都干倒了，现在市场angular，jQuery等都逐步没落。

预编译css也同样，曾经也有多个派系。而后在sass与less的不断竞争中，stylus等其他的编译器也逐步退出市场。本文的重点，对比预编译css，scss与less对比。

基本介绍

先一起看看官方是如何定义或者介绍他们。

Sass

官方定义：

Sass是一种基于Ruby的CSS预处理器，它可以扩展CSS语言，并添加许多其他功能，如变量、嵌套规则、Mixin、函数等。Sass文件以“.scss”扩展名保存，与标准CSS文件兼容，并且可以使用普通CSS代码和语法。Sass也有一个较早的语法格式，以“.sass”扩展名保存，使用缩进的语法来代替括号和分号，但它现在已经不那么流行了。

个人理解：

sass是第一个流行的CSS预处理器，在2006年产生，这也为后续他用户量第一埋下伏笔。

Scss

官方定义：

Scss也是一种基于Ruby的CSS预处理器，它与Sass有很多相似之处，但是它的语法更接近标准CSS，使用花括号和分号。它是一种非常流行的CSS预处理器，与Sass相比，它更容易学习和使用，并且与现有的CSS代码更兼容。

个人理解：

Scss是Sass的一种语法格式，由2007推出。这还要从sass的规范语法说起，最典型的就是Sass使用缩进来表示代码块。这使部分使用者比较别扭。而产生了Scss，基于花括号和分号的CSS语法格式，使得它更易于阅读和理解。随着时间的推移，Scss逐渐取代了Sass作为Sass的主要语法格式。

Less

官方定义：

Less是一种基于JavaScript的CSS预处理器，它与Sass和Scss有很多相似之处，但它使用类似CSS的语法，并且更容易学习和使用。Less支持变量、Mixin、嵌套规则等功能，并且可以在客户端和服务器端使用。

个人理解：

Less由2009推出，也是提供了一套完整的生态链。它的语法跟sass不同。Less的学习成本更低，更容易理解和编写。此外，Less的编译速度比Sass更快。

Stylus

官方定义：

Stylus是一种基于JavaScript的CSS预处理器，它与Less、Sass和Scss有很多相似之处，但它的语法非常灵活，可以自由选择使用缩进或花括号来表示嵌套和块。Stylus还支持变量、Mixin、函数等功能，并且具有非常强大的插件系统，可以轻松地扩展其功能。

个人理解：

Stylus也是曾经一个比较完善的预编译语言。但市场份额却原来越少。个人的观点，一是的学习成本高一些，有入门的门槛。而是生态链的问题，sass跟less的有较完善的生态链，而Stylus更像一个独立的东西。

PostCSS

官方定义：

PostCSS不是一种独立的CSS预处理器，而是一个CSS处理工具集合，可以通过各种插件扩展其功能。PostCSS可以用于转换CSS语法、提供自动前缀、压缩CSS代码、处理嵌套规则、优化图片等。它不像其他预处理器那样提供自己的语言，而是基于现有的CSS语法。使用PostCSS可以通过插件来实现更多的自定义和灵活性，使其成为一个强大的CSS处理工具。

个人理解：

跟上述的其他的处理器不同，PostCSS不应该算是一个预处理器，但却是我们做适配，压缩等处理时的一个选择。

数据分析

市场占有率分析

我们借助npm官网统计工具对比，查看less与scss的数据量对比：

链接： npm-stat.com/charts.html… npm-stat.com/charts.html…

如上图，左侧为less的数据，右侧为scss的数据。

我们可以通过统计清晰的看到。单单一个sass的下载量，基本达到less的两倍以上。此处还不包含sass阵营的其他工具，包括node-scss，dart-scss的下载量。

可以得出结论：sass的使用量约为less的几倍。（但此处有个值得一提的地方：统计为全球的用户量的统计，并非针对国内）

组件库选择分析

从上述的数据中，我们了解到sass的使用量较多，但是国内出名的组件库，却是less居多。毕竟组件库，也代表我们的使用习惯之一。我们一起看看组件库的选择。

ant design

选择了Less，地址：www.antdv.com/docs/vue/cu…

element

选择了scss，地址：element.eleme.io/#/zh-CN/com…

varlet

选择了Less，地址：varlet.gitee.io/varlet-ui/#…

vant

选择了Less，地址：vant-contrib.gitee.io/vant/v3/#/z…

结论：关于组件库的选择，Less还是占大多数，当然Scss也是部分组件库的选择。

个人分析

相同点

都属于css语法编译的工具。
工具提供的方法也很多雷同。如都支持嵌套，都支持混合器（Mixin），都支持扩展（Extend），都支持颜色函数，都支持变量等等。
生态链都一致丰富，常用构建工具都基本支持，如webpack，vite, rollup等。
社区支持都强，提供了大量的插件、工具和资源，可以帮助开发者更好地使用Sass。
目的性也一致，都提高了CSS编写的效率和可维护性而产生。

不同点

部分语法不同，如Sass 和 SCSS 中的变量使用 $ 符号进行定义和引用，而不是 Less 中使用的 @ 符号
Sass 和 Scss 还提供了一些 Less 没有的特性，例如控制流语句和继承等。
Sass 和 Scss 是基于Ruby或者Dart，Node的预处理器，他需要借助机器安装这些环境来支持。而Less, 是基于JavaScript的CSS预处理器，引入一段JS即可编译，有浏览器还是服务端，他都能编译。
虽然都有强大的社区，生态链。但总体还是Scss更丰富一些。

特性分析

Node-Sass 在国内有一定的兼容性问题，但是基于Dart 语言编写的 Dart Sass以及解决了这个问题。还在使用Node-Sass的建议切换Dart Sass。
Less 的语法相对于 Sass 更加简洁，易于学习和理解。这使得 Less 在国内开发者中更受欢迎，尤其是对于那些不太熟悉预处理器语言的开发者来说。
Sass的阵营更丰富，使用量更高一些，市场份额也更加稳定。除了发家早，这也得益于生态圈，例如 Bootstrap、Foundation、Bulma、Vue.js 等，都在曾经的版本自带了Sass。
国内组件库，还是Less居多，很多"高级前端"，都觉得less 一直都比 sass 要稳定。至少不会出现Node版本，Python版本不一致等问题。

结语

所以Sass与Less谁更强？估计短期还是分不出成败。

预处理器 on Last Stand