关于 CSS 预处理器：Sass Vs Dart Sass

CSS 预处理器，是 Web 前端开发中，常用的一种工具。它们基于 CSS 扩展了一套属于自己的 DSL（Domain Specific Language），来解决我们书写 CSS 时难以解决的问题，如语法不够强大、没有变量和合理的样式复用机制等。CSS 预处理器的存在：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性；在如今前端开发中，扮演着不可或缺的角色。

Sass 是成熟、稳定、强大的专业级 CSS 扩展语言。它兼容 CSS、功能丰富、社区庞大，为业界认可，被广泛应用；本文将根据使用 Sass （Old Sass）存在的痛点，以及更好的替代品，来陈述个人观点：不推荐使用 Sass 作为 css 预处理器，更倾向于使用 Less 或 Stylus，Dart Sass（New Sass）。

Sass Vs Scss

Sass 有两种语法。

第一个被称为 SCSS（Sassy CSS），在本参考文献中一直使用，它是 CSS 语法的扩展。这意味着每个有效的 CSS 样式表，都是具有相同含义的有效 SCSS 文件，两者完全兼容。下文描述的 Sass 功能增强了此语法。使用此语法的文件扩展名为 .scss。

第二种或更旧的语法称为缩进语法（有时也称为“ Sass”），提供了一种更为简洁的 CSS 编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为 .sass。

以上出自 Sass 官网对两者的解释。因为 scss 完全兼容 css，目前一般常用的是 scss；但 scss 也是 Sass 语法一部分，因此就以此为标题；言下之意，无论是 .scss 还是 .sass 皆不推荐使用。

不推荐使用的理由

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，如果安装并单独使用 sass，这并无什么问题；

# 安装 sass
npm install -g sass
# 使用 sass
sass source/stylesheets/index.scss build/stylesheets/index.css

但在工程化项目中，就另当别论了；，需要借助 node-sass。它虽然能够以惊人的速度，通过连接中间件自动将 .scss 文件本地编译为 css，但同时存在很多问题，导致在有的时候引发巨大痛点，这便是“不推荐使用 Sass 作为 css 预处理器”主要理由。

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

node-sass 存在的痛点

node 版本与 node-sass 版本不兼容

node-sass 与 Node.js 版本相关联；这就导致，一旦本地 Node.js 升级，就会出现 node-sass 无法工作的情况，如下报错：

Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment:
This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass to build the binding for your current environment.

Module build failed (from ./node_modules/sass-loader/index.js):Error: Missing binding /…/xxx/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x

通常遇见类似问题，你就需要通过 rebuild 或重新安装 node-sass 来解决，徒增烦恼；当然，也可以借助 nvm 来切换至 node-sass 对应 Node.js 版本；

npm rebuild node-sass
# Or
npm uninstall node-sass
npm install node-sass
# Or
nvm use [node-sass 对用的 Node 版本]

需要 node-gyp 作为先决条件

node-sass 需要 node-gyp 作为先决条件，而 node-gyp 又需要您安装了兼容版本的 Python，啧啧，这真是，不出问题还好；出现就得好一番折腾（而且其报错并不是很友好，就需要定位排查、查阅各种资料来修复）。

node-gyp requires that you have installed a compatible version of Python, one of: v2.7, v3.5, v3.6, v3.7, or v3.8. If you have multiple Python versions installed ……

先前因为需要，在 Mac 上，需要将 Python2 升级至 Python3，之后就导致各种 node-sass 问题，好一番折腾才修复。

gyp verb check python checking for Python executable “python” in the PATH
gyp verb which succeeded python /usr/local/bin/python
gyp ERR! configure error
gyp ERR! stack Error: Command failed: /usr/local/bin/python -c import sys; print “%s.%s.%s” % sys.version_info[:3];
gyp ERR! stack File ““, line 1
gyp ERR! stack import sys; print “%s.%s.%s” % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax

/Users/xxx/.node-gyp/12.13.0/include/node/v8.h:3039:5: note: candidate constructor not
viable: requires 2 arguments, but 1 was provided
Utf8Value(Isolate* isolate, Localv8::Value obj);>

binding.node 源无法访问或速度慢

实际上 node-sass 依赖了一个二进制文件 binding.node，从 npm 源安装完本体后还会从 github（默认源）下载 binding.node；这就导致默认情况下，下载 node-sass 依赖很迟缓。

以上，SASS 不仅需要额外安装 node-sass （很慢），而且跟本地开发环境（Node.js，Python）高度挂钩，容易出现各种诡异问题，故而不推荐使用；而且，SASS 所提供的常用功能，Less、Stylus 也同样具备；而且 Less、Stylus 易于安装，使用便捷，何乐不为？

It's only too late if you decide it is. Get busy living. or get busy dying!

关于 CSS 预处理器：Sass Vs Dart Sass

Sass Vs Scss

不推荐使用的理由

node-sass 存在的痛点

推荐使用 Less 或 Stylus 或 dart-sass

Dart Sass 介绍

您可能会感兴趣的文章

文档信息