有流行的css预处理器less和sass。css预处理器的主要目的是通过引入一些编程功能（例如变量，混合和条件），使css的编写更加动态，更有条理和更具生产力。现在的问题是，这两个中哪个做得更好？
为了做出决定，我们将在多个因素中比较这两个因素：表现较好的一个获得1分；如果出现平局，双方将获得1分。
让我们开始。
安装让我们从最基本的步骤installation开始。sass和less建立在不同的平台上。
sass：?sass需要使用c ++编写的编译器，并且需要该指定语言的编译器的实现者。如果您的项目在node.js应用程序上运行，则需要安装node编译器。go，python，ruby甚至c＃都有一个。
该编译器的大小非常大，因此可能需要一段时间才能通过慢速的internet连接进行下载。此外，每个平台版本也可能需要不同版本的编译器，因此您将需要下载兼容的编译器。
less：另一方面，less纯粹是用javascript编写的。安装less就像将javascript库链接到html文档一样容易。有一些gui应用程序可帮助将less编译为css，其中大多数是免费的并且运行良好（例如winless和less.app）。
结论：less易于安装且快速。它不需要休编译器来使其运行
到目前为止的得分：?sass（0）-less（1）
语言能力每个css预处理器都有自己的语言，并且大多数情况下都很常见。例如，sass和less都具有变量，但是两者之间没有显着差异，只是sass用$符号定义变量，而less用@符号定义变量。他们仍然做同样的事情：存储一个常量。
下面，我们将研究sass和less中一些最常用的语言（根据我的经验）。
套料嵌套规则是避免重复编写选择器的好习惯，并且sass和less的嵌套规则具有相同的样式。
sass / scss和less
1个
2
3
4
5
6
7
8
9
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
ul {
?padding: 0;
?margin: 0;
}
}
但是sass / scss通过允许我们也嵌套单个属性使此方法更进一步，这是一个示例：
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
ul {
?padding: 0;
?margin: 0;
}
border: {
?style: solid;
?left: {
?width: 4px;
?color: #333333;
?}
?right: {
?width: 2px;
?color: #000000;
?}
}
}
此代码将生成以下输出。
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
border-style: solid;
border-left-width: 4px;
border-left-color: #333333;
border-right-width: 2px;
border-right-color: #000000;
}
nav ul {
padding: 0;
margin: 0;
}
结论：嵌套单个属性是很好的补充，并且被认为是最佳实践，尤其是遵循dry（请勿重复自己）原则。因此，我认为很明显在这种情况下哪一个做得更好。
到目前为止的得分：?sass（1）-less（1）
混合蛋白sass和less中的mixin定义有所不同。在sass中，我们使用@mixin指令，而在less中，我们使用类选择器定义它。这是一个例子：
sass / scss
1个
2
3
4
5
6
7
8
9
10
@mixin border-radius ($values) {
border-radius: $values;
}
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
@include border-radius(10px);
}
减
1个
2
3
4
5
6
7
8
9
.border( @radius ) {
border-radius: @radius;
}
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
.border(10px);
}
mixins将复制属性并将其添加到定义的位置。
遗产
sass和less都通过所谓的inheritance继承。这个概念与mixins完全相同，但是它不是复制整个css属性，而是使用来对具有完全相同的set属性和值的选择器进行分组。sess使用@extendsless将其与:extend伪类一起使用。
请看下面的示例：
sass / scss
1个
2
3
4
5
6
7
8
.circle {
border: 1px solid #ccc;
border-radius: 50px;
overflow: hidden;
}
.avatar {
@extend .circle;
}
较少：
1个
2
3
4
5
6
7
.circle {
border: 1px solid #ccc;
border-radius: 50px;
overflow: hidden;
}
.avatar:extend(.circle) {}
该代码的结果为：
1个
2
3
4
5
.circle, .avatar {
border: 1px solid #ccc;
border-radius: 50px;
overflow: hidden;
}
推荐读物：选择器继承的简便方法：@extend简介
结论：sass和less都工作得很好，除了less?:extend伪类看起来很奇怪之外，特别是如果我们不在选择器中添加其他属性，或者将它与css标准伪类（如:not和）一起使用时:nth-child。因此，我认为sass可以更好地实现此功能。
到目前为止的得分：无礼（2）–较少（1）
运作方式sass和less都可以执行基本的数学运算，但是可能返回不同的结果。查看他们如何执行此随机计算：
sass / scss
1个
2
3
4
$margin: 10px;
div {
margin: $margin - 10%; /* syntax error: incompatible units: '%' and 'px' */
}
减
1个
2
3
4
@margin: 10px;
div {
margin: @margin - 10%; /* = 0px */
}
结论：在这种情况下，sass可以更准确地完成操作；由于％和px不相等，因此应返回错误。虽然，我实际上希望它可以是10px – 10％= 9px。
到目前为止的得分：无礼（3）-少（1）
错误处理错误通知也是使调试代码更加容易的重要因素。想象一下混乱中某处的数千行代码和少量错误。明确的错误通知将是快速找出问题的最佳方法。
sass：在此示例中，我将通过cli运行编译sass。当sass看到有效的代码时，它将生成一个错误通知。在这种情况下，我们将删除未定义的变量，这肯定会引发错误。看一下下面的截图。
该错误消息非常简单。它说有一个未定义的变量（的确如此），并突出显示有问题的变量。我们还可以查看导致此错误的行。它具有调试错误的基本需求。但在处理错误的更好，即这个内置的错误，萨斯还推出了