写在前面
CSS 有三种变种语言，分别为 Sass、Less 和 Stylus。
其中 Sass 的 scss 语法和 less、stylus 都完全兼容 css 语言。
scss 的后缀为 .scss 。less 的后缀为 .less、stylus 的后缀为 .styl
1. Sass 来源
Sass 来源于 css，在早期前端页面是由设计师来制作的时候，css 是设计师使用的网页样式设计语言，没有变量、条件判断和循环等典型的编程语言的特点。因此 css 和 html 一样都不是一门编程语言。
随着前端开发工程师的出现，网页开发开始由专业人员负责，前端开发工程师都是程序员，因此在使用 css 时感觉相当麻烦，因此后来就有人为 css 加入编程元素，使之支持变量、函数等。使得 css 看起来更像是一门编程语言，这样设计后的语言称之为 Sass。
严格来说，Sass 并不是一门语言，Sass 是一种 css 预处理器，基本设计思路就是，使用添加了编程元素后的语法编写样式，然后由 Sass 工具将其编译成正常的 css 文件。
css 预处理器不止 Sass 一个，有很多，不同的预处理器的思路是一样的，只不过实现语言不一样。
2. Sass 和 Scss
了解了 Sass 的来源，你可能也听说过 Scss。那这两个有什么区别呢？
其实 Sass 和 Scss 都是 Sass。只是由于 Sass 的版本问题衍生的两个语法。Sass 是最早期的语法规定，Sass 语法和原生的 css 语法出入较大，在 Sass 语法中，没有分号（;），没有花括号（{），Sass 语法是由严格的缩进格式进行控制的。因此，早期的 Sass 语法不是特别被接受，也不被常用。到后来，Sass 又在 css3 的基础上进行扩展，这次的 Sass 语法设计与以往完全不同，其语法格式完全兼容 css3 语法，即支持分号（;）和花括号（{），也就是说开发者在使用 Sass 语法时，完全可以使用 css 语法。Sass 这次语法设计的历史性转折，让 Sass 被大众所喜爱。Sass 为这种新的语法命名为 Scss。
所以，Sass 有两种语法，一个是早期的严格缩进格式的 Sass语法，另一个是最新的兼容 css语法 的 Scss语法。两种语法下的文件后缀名也不一样，Sass 语法下的后缀名为 .sass，Scss 语法下的后缀名为 .scss。
3. sass 和 dart-sass 和 node-sass
sass 严格来说是一个脚本语言，负责将后缀名为 .sass 或 .scss 的文件编译成对应的 css 文件，是一种编译器，是一种工具。
但是我们在日常安装 sass 工具时，会碰到 sass、node-sass、dart-sass 三个版本。那么这三个又是什么区别呢？
sass 是一个编译器，可以由任意语言编写而成，只要能实现对应的编译功能就行。
sass 编译器最开始是由 Ruby 语言写成的，因此安装 sass 依赖于 Ruby 环境，通过 gem 安装。此时安装命令 gem install sass 中的 sass 是默认的 sass 编译器，即 Ruby-sass。
后来在2012年HTML5开发者大会上，Sass的创建者 Hampton Catlin 宣布推出 libSass 1.0 版，libSass 是用 C++ 语言编写的，相比于 Ruby 语言写的 Sass，C++ 语言写的 Sass 编译器性能更好。因此此时安装的 sass 默认设置就是 libSass 了。因为 libSass 不完全兼容以前用 Ruby 语言写的 Sass，因此将之前用 Ruby 语言实现的 Sass 叫做 Ruby Sass，Ruby 版本的 sass 一直存在，且有在一直维护。
libSass 只是一个核心库，要想安装使用 LibSass 需要一个包装器（Wrapper），在不同的环境中使用要依赖不同的包装器，如在 node.js 环境中这个包装器就是 node-sass。node-sass 的底层就是 libSass。因此可以通过 NPM 安装 node-sass 来使用 libSass。libSass 出现后，在 node 环境中安装的 sass 默认设置就是 node-sass 了。即 npm install sass 中的 sass 就是 node-sass。
在 2016 年的时候，Sass 团队又用 Dart 语言实现了 Sass，称之为：dart-sass。dart-sass 具有更明显的优势，因此， 后来 Sass 宣布将其默认实现设置为了 dart-sass。因此在使用 npm install sass 时的 sass 就是默认的 dart-sass。但是 libSass 一直存在，也在一直维护。若开发者想使用 libSass 就在安装时手动安装即可，如在 node 环境中安装： npm install node-sass。
因此我们在使用默认 sass 安装时，即 yarn add sass ，目前来说，在 node 环境中是默认的 dart-sass。
sass 永远是 Sass 当前默认安装的主要实现版本，node-sass 和 dart-sass 是可以选择实现语言的具体版本
参考链接
若有收获，就点个赞吧
0 人点赞
