[转]CSS、LESS和SASS（SCSS）的区别以及Ruby Sass、LibSass、Node Sass、Dart Sass之间的关系

　　随着前端开发的不断发展，CSS也逐渐延伸出了很多新的语言，less和Sass就是其中两种，下面我们就一起来看看它们到底有何区别。

SASS和LESS

　　SASS（英文全称：Syntactically Awesome Stylesheets）Sass 诞生于 2007 年，使用Ruby 编写，是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

　　LESS（2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。

既然提到SASS，就说下与它相关的4个库：Ruby Sass、LibSass、Node Sass、Dart Sass 。基本关系和情况如下：

1、Ruby Sass 是 Sass 的最初实现，但是已经于 2019年 3 月 26 日将寿终正寝。我们已经不再对它提供任何支持了，请 Ruby Sass 用户迁移到其它实现版本（LibSass 或 Dart Sass）。可参见：Ruby Sass。

2、Sass的主要实现有Ruby Sass 11和LibSass 20（node-sass底层使用的是LibSass），它们都有各自的优缺点。

3、官方建议新的Sass项目不推荐使用LibSass和Node Sass，而采用Dart Sass。可参见LibSass is Deprecated、Sass和Sass中文网。所以，具体应用时，可将node-sass换成dart-sass。

目前（截至2022.1.24），国内node-sass经常安装失败。如果已经安装了node-sass，可以使用命令卸载：npm uninstall node-sass。

然后再安装Dart Sass，其npm安装命令如下：npm install sass --save或npm install sass -S或npm install -g sass。

SASS和LESS使用

传统的css可以直接被html引用，但是sass和less由于使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件，虽然过程多了一层，但是毕竟sass/less在书写的时候就方便很多，所以在我们使用sass/less之前，只要我们提前设置好，就可以直接生成对应的css文件，而我们只需要关心我们的sass/less文件即可。

Sass的语法规则，SASS技术的文件的后缀名有两种形式：.sass和.scss。其实两者都是同一种东西，两种均可以可以通过编译生成浏览器能识别的css文件。这两种的区别：

扩展名不同；

SCSS 的语法书写和CSS 语法书写方式非常类似，.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号；

Sass 语法

$font-stack: Helvetica, sans-serif //定义变量

$primary-color: #333 //定义变量

body

font: 100% $font-stack

color: $primary-color

SCSS 语法

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

编译出来的 CSS

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

LESS技术的后缀名只有一种，就是.less，语法规则和sass大同小异，详细可以参考Less中文网。

LESS使用分为两种：

1.直接在浏览器中引入less编译器js文件和less文件，直接渲染编译为css文应用到当前页面中。

2.less文件通过编译成为css之后引用css；

/* Less */

@color: #999;

@bgColor: skyblue;//不要添加引号

@width: 50%;

wrap {

color: @color;

width: @width;

}

/* 生成后的 CSS */

wrap {

color: #999;

width: 50%;

}

关于SASS和LESS的概念就是这样，如果想要继续深入了解更详细语法，恐怕就得多花功夫了，不过，学好SASS和LESS对你的前端发展绝对是有很大帮助的。加油，努力成为前端大神。

原文链接：Css、less和Sass（SCSS）的区别

其它链接：

1、是时候弃用ibSass和node-sass而采用Dart Sass了！

2、vue-cli 3中dart-sass替换node-sass