浅析ruby-sass、libsass、dart-sass历史，三大脚手架使用sass

发展历史

经常在某些文章上看到一些字眼：node-sass、dart-sass等等，到底有什么区别？

2023 年了我入手sass应该怎么安装使用？

一、ruby-sass

发布于2006年，是sass编译器的ruby实现：

ruby-sass 是最早的 sass 编译器，当时ruby是Web开发的前沿语言。由sass的创始人Hampton Catlin 开发。因为它是用ruby编写的，因此被称为ruby-sass

ruby-sass 是一个纯ruby库，因为它依赖于ruby来编译Sass文件，所以还得需要用户安装Ruby

由于sass的性能需求已经超过了ruby所能提供的速度，且 node-sass 更易于安装，ruby-sass 于2019年宣布停止维护。

相关官网原文介绍：sass-lang.com/ruby-sass/

二、libsass

发布于2013年，是sass编译器的C/C++实现：

比 ruby-sass 快得多，旨在易于集成到许多不同的语言中，例如可以集成到Go、Python、Node等等语言，官网把这些被集成的语言叫做包装器（wrappers ），所有的包装器可以看相关官网原文介绍：sass-lang.com/libsass/

有这么多包装器，这里只介绍 node-sass，因为它是libsass中最受欢迎的，它由于其性能和Node.js的流行而变得流行

但是有个最蛋疼的地方：需要考虑和node版本兼容性问题，node 和 node-sass 的版本对应关系：

Node版本	支持的node-sass版本
Node 20	9.0+
Node 19	8.0+
Node 18	8.0+
Node 17	7.0+, <8.0
Node 16	6.0+
Node 15	5.0+, <7.0
Node 14	4.14+, <9.0
Node 13	4.13+, <5.0
Node 12	4.12+, <8.0
Node 11	4.10+, <5.0
Node 10	4.9+, <6.0
Node 8	4.5.3+, <5.0
Node <8	<5.0

它也顺应时代要退休了：（目前仍然可用，但如今推荐dart-sass）

三、dart-sass

发布于2016年，是sass编译器的dart实现：

dart-sass 可以编译为 js，所以它提供的 npm 是 js 的，不用像 node-sass 一样需要考虑 node 版本的兼容性问题 ，相关官网原文介绍：sass-lang.com/dart-sass/

dart-sass速度上会比 node-sass 慢，但是具备编译输出为JS的能力，所以dart-sass可以兼容node.js平台

目前它是被官方推荐的 sass 编译器，所以直接改名成 sass 了

注意：dart-sass 不支持/deep/，要改成::v-deep（简写为:deep）

sass和scss区别

sass最初是为了配合haml而设计的，因此有着和haml一样的缩进式风格：

.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss：

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

所以现在推荐使用scss，更容易让人接受，标签中使用： <style lang="scss">

使用安装

2023 年，使用dart-sass就对了

Vue3 + Vite

演示例子版本：

"vue": "^3.3.4"
"vite": "^4.4.5"

vite已经内置sass-loader，无需额外安装

安装：npm i sass -D

接着便可以使用sass了，使用相关语法举例：

<template>
  <div>test</div>
</template>
<style lang="scss" scoped>
$myColor: red;
div {
  color: $myColor;
}
</style>

Vue2 + Vue/CLI

演示例子版本：

"vue": "^2.6.14"
"@vue/cli-service": "~5.0.0"

安装：npm i sass sass-loader -D

无需其他配置，这样就可以使用sass了，使用代码同上

Vue2 + webpack

演示例子版本：

"vue": "^2.7.14"
"webpack": "^5.88.2"

安装：npm i sass sass-loader -D

找到你的webpack配置文件：

// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  //..其他配置省略
  module: {
    rules: [
      {
        test: /\.scss/,
        // 如果要用MiniCssExtractPlugin.loader那就替换下面的style-loader  
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

这样就可以使用sass了，使用代码同上

本文仅代表个人观点，可能存在不准确或不完整之处，欢迎各位读者批评指正