早年的 node-sass 是用 c/c++ 实现的,现在已经不再维护了。
sass
和 sass-embedded
是不同的软件包,虽然用法和发行版本都是一样的,但本质的区别是,sass 是 Dart Sass 的纯 javascript 实现版本 ,而 sass-embedded 是 Dart 原生实现,外层暴露了 javascript 接口。
因为有不同的实现,而且包的名字有很大的区别,sass 包的名字更直接,占尽优势,所以很多人都是直接安装 Sass 这个包,像 element-plus 用的也是 sass,但它们真的不一样。
对比
下面从几个维度来看看这两者的区别:
特性 | sass | sass-embedded |
---|---|---|
编译引擎 | dart sass | javascript |
编译速度 | 较慢 | 较快 |
启动时间 | 稍慢 | 快 |
包体积 | 2.8MB | 18-22MB |
内存占用 | 80-120MB | 40-70MB |
安装耗时 | 2-5 秒 | 5-10 秒 |
周下载量 | 18,967,153 | 2,896,642 |
版本 | 同步发布 | 同步发布 |
我们用两者分别来编译 element-plus
的 scss 文件来看看对比:
js
const fs = require('fs')
const sass = require('sass')
const saasEmbedded = require('sass-embedded')
console.time('sass')
const result = sass.compile('./packages/theme-chalk/src/index.scss')
fs.writeFileSync('./element-plus.css', result.css)
console.timeEnd('sass')
console.time('sass-embedded')
const result1 = saasEmbedded.compile('./packages/theme-chalk/src/index.scss')
fs.writeFileSync('./element-plus1.css', result1.css)
console.timeEnd('sass-embedded')
编译结果:

三次对比中 sass-embedded 分别约比 sass 快 3.39 倍、3.31 倍、2.78 倍;sass-embedded
平均比 sass
快约 3.16 倍。
测试机器为 Mac Mini M4;node版本:v22.14.0
优先推荐大家使用 sass-embedded
。
如何使用?
lua
pnpm install sass-embedded
直接安装,使用方式和原来的 sass 一样,无任何改变。