让你说一说Sass、Less 的区别是什么，你知道吗？

引言

Sass和Less是两种常见的CSS预处理器，它们都是CSS的一种抽象层，可以增加CSS代码的复用性，层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。虽然它们的功能类似，但是它们之间存在一些区别。

我们在面试的时候就可能会遇到这样的一个问题，我们可能被问到是否了解过，使用过Sass和Less，而它们的区别又在哪？可能你知道但是又不太清晰，或者并不知道。

那让我们一起来看看它们俩到底有什么区别吧：

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文件：

ini 复制代码

<link rel="stylesheet/less" href="style.less">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

Sass使用$作为变量符，而Less使用@。举个例子，在Sass中，我们可以这样定义一个变量：

css 复制代码

$primary-color: #f00;

而在Less中，我们可以这样定义一个变量：

less 复制代码

@primary-color: #f00;

Sass支持条件语句，可以使用if{}else{},for{}循环等等。举个例子，在Sass中，我们可以这样定义一个条件语句：

less 复制代码

$condition: true;  
@if $condition {  
  // do something...  
} @else {  
  // do something else...  
}

而在Less中，没有类似的条件语句。但是Less支持使用JavaScript表达式来实现类似的效果。举个例子，在Less中，我们可以这样定义一个JavaScript表达式：

less 复制代码

@condition: true;  
.some-class {  
  color: ~`@{condition} ? "#f00" : "#0f0"`; // 使用JavaScript表达式  
}

Sass的代码风格比Less更加灵活，例如Sass可以使用缩进进行代码块的区分，也可以使用大括号进行区分。举个例子，在Sass中，我们可以这样定义一个代码块：

css 复制代码

.parent {  
  color: #f00;  
  .child {  
    color: #0f0;  
  }  
}

而在Less中，只支持使用大括号进行代码块的区分。举个例子，在Less中，我们可以这样定义一个代码块：

css 复制代码

.parent {  
  color: #f00;  
  .child {  
    color: #0f0;  
  }  
}

Sass和Less都支持CSS的继承方式，但是它们之间的实现方式不同。Sass使用"@extend"语句实现继承，而Less使用":extend()"方法实现继承。举个例子，在Sass中，我们可以这样实现继承：

css 复制代码

.parent {  
  color: #f00;  
}  
.child {  
  @extend .parent; // 使用@extend语句实现继承  
  font-size: 16px;  
}

而在Less中，我们可以这样实现继承：

css 复制代码

.parent {  
  color: #f00;  
}  
.child {  
  &:extend(.parent); // 使用:extend()方法实现继承  
  font-size: 16px;  
}

Sass和Less都是非常有用的CSS预处理器，它们可以提高CSS代码的可读性和可维护性。它们之间的区别在于编译环境、变量符、条件语句、代码风格和继承方式等方面。我们可以根据自己的需求选择适合自己的预处理器。

我们在这里只简单介绍了一下它们之间的区别，让你在遇到这样的一个问题的时候不至于手足无措，能够稍微整理一下思路。当然，如果你想学习更多有关Sass和Less的知识的话可以仔细参考官方文档和相关教程。

那么这篇文章就到这里结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多~