让你说一说Sass、Less 的区别是什么，你知道吗？
让你说一说Sass、Less 的区别是什么，你知道吗？
引言
Sass和Less是两种常见的CSS预处理器，它们都是CSS的一种抽象层，可以增加CSS代码的复用性，层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。虽然它们的功能类似，但是它们之间存在一些区别。
我们在面试的时候就可能会遇到这样的一个问题，我们可能被问到是否了解过，使用过 Sass 和Less，而它们的区别又在哪？可能你知道但是又不太清晰，或者并不知道。
那让我们一起来看看它们俩到底有什么区别吧：
1. 编译环境不同
Sass 是在服务端处理的，需要使用编译工具将 Sass 代码编译成 CSS 文件。目前常用的编译工具有 Dart-Sass 和 Node-Sass。举个例子，如果我们有一个 Sass 文件 “style.scss” ，我们可以使用 Dart-Sass 编译成 CSS 文件“style.css”的命令，就像这样：
sass?style.scss?style.css??而Less则需要在客户端使用 JavaScript 引入 Less 文件，并使用 Less.js 将 Less 代码编译成 CSS文件。举个例子，如果我们有一个 Less 文件“style.less”，我们就可以使用以下代码在 HTML 文件中引入 Less 文件：
<link?rel="stylesheet/less"?href="style.less">??
<script?src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>?2. 变量符不同
Sass 使用 $ 作为变量符，而 Less 使用 @。举个例子，在 Sass 中，我们可以这样定义一个变量：
$primary-color:?#f00;??而在Less中，我们可以这样定义一个变量：
@primary-color:?#f00;??3. 条件语句不同
Sass 支持条件语句，可以使用if{}else{},for{}循环等等。举个例子，在 Sass 中，我们可以这样定义一个条件语句：
$condition:?true;??
@if?$condition?{??
??//?do?something...??
}?@else?{??
??//?do?something?else...??
}?而在 Less 中，没有类似的条件语句。但是 Less 支持使用 JavaScript 表达式来实现类似的效果。举个例子，在 Less 中，我们可以这样定义一个 JavaScript 表达式：
@condition:?true;??
.some-class?{??
??color:?~`@{condition}???"#f00"?:?"#0f0"`;?//?使用JavaScript表达式??
}??4. 代码风格不同
Sass 和 Less 都是 CSS 预处理器，它们的代码风格非常相似，但是有一些细微的差别。
其中一个主要的区别是变量声明的方式。在 Sass 中，变量使用 $ 符号声明，而在 Less 中，变量使用 @ 符号声明。例如，在 Sass 中，我们可以这样声明一个变量：
$primary-color:?#007bff;??而在Less中，我们可以这样声明一个变量：
@primary-color:?#007bff;??Sass 和 Less 在嵌套规则中使用父元素选择器的方式有这样一些区别：
- Sass使用
&符号来表示父元素选择器，例如：
.parent?{??
??color:?blue;??
??
??&:hover?{??
????color:?red;??
??}??
??
??.child?{??
????font-weight:?bold;??
??}??
}?在上面的 Sass 代码中，&:hover表示.parent:hover，.child表示.parent .child。
- Less使用
&符号也可以用来表示父元素选择器，也但是可以使用@符号来表示父元素选择器的变量，例如：
.parent?{??
??color:?blue;??
??
??&:hover?{??
????color:?red;??
??}??
??
??@selector:?~"&";??
??@{selector}?.child?{??
????font-weight:?bold;??
??}??
}?在上面的 Less 代码中，&:hover表示.parent:hover和sass是类似的，@selector: ~"&";表示将&符号赋值给@selector变量，@{selector} .child表示.parent .child。需要注意的是，在 Less 中，如果要在选择器中使用变量，需要使用@{}语法将变量包裹起来。
最后， Sass 和 Less 在使用Mixin时也有一些差别。在 Sass 中，Mixin 使用@mixin声明，而在Less中，Mixin使用.mixin声明。例如，在 Sass 中，我们可以这样定义一个 Mixin：
@mixin?button-styles?{??
??border:?none;??
??padding:?10px?20px;??
??font-size:?1rem;??
}??而在 Less 中，我们可以这样定义一个 Mixin：
.button-styles()?{??
??border:?none;??
??padding:?10px?20px;??
??font-size:?1rem;??
}??5. 继承方式不同
Sass 和 Less 都支持 CSS 的继承方式，但是它们之间的实现方式不同。Sass使用“@extend”语句实现继承，而 Less 使用“:extend()”方法实现继承。举个例子，在 Sass 中，我们可以这样实现继承：
.parent?{??
??color:?#f00;??
}??
.child?{??
??@extend?.parent;?//?使用@extend语句实现继承??
??font-size:?16px;??
}??而在 Less 中，我们可以这样实现继承：
.parent?{??
??color:?#f00;??
}??
.child?{??
??&:extend(.parent);?//?使用:extend()方法实现继承??
??font-size:?16px;??
}??总结
Sass 和 Less 都是非常有用的 CSS 预处理器，它们可以提高 CSS 代码的可读性和可维护性。它们之间的区别在于编译环境、变量符、条件语句、代码风格和继承方式等方面。我们可以根据自己的需求选择适合自己的预处理器。
我们在这里只简单介绍了一下它们之间的区别，让你在遇到这样的一个问题的时候不至于手足无措，能够稍微整理一下思路。