【Bootstrap】less与sass区别

---

前言

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言，包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
Sass：兼容CSS：Sass完全兼容所有版本的CSS。
特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。

---

区别

1.变量定义方式不同

在LESS中，变量使用@符号定义，例如@color: red；

@bgColor: antiquewhite;
@size: 20px;
@color: red;

---

在Sass中，变量使用$符号定义，例如$color: red。

$fontColor:red;
$fontSize:20px;
$fontWeight:500;

---

2.语法不同

LESS使用类似CSS的语法，而Sass使用类似Ruby的语法。

---

3.扩展语法不同

在LESS中，可以使用&符号来扩展选择器；
在Sass中，可以使用@extend关键字来扩展选择器。

---

4.编译方式不同

LESS可以使用客户端编译器将LESS代码编译为CSS代码，也可以使用服务器端编译器将LESS代码编译为CSS代码并输出到浏览器；
Sass需要使用服务器端编译器将Sass代码编译为CSS代码。

---

5.引入方式不同

在LESS中，可以使用@import关键字引入其他LESS文件；
在Sass中，可以使用@import关键字引入其他Sass文件，也可以使用@use和@include关键字引入其他模块。

---