有流行的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看到有效的代码时，它将生成一个错误通知。在这种情况下，我们将删除未定义的变量，这肯定会引发错误。看一下下面的截图。
该错误消息非常简单。它说有一个未定义的变量（的确如此），并突出显示有问题的变量。我们还可以查看导致此错误的行。它具有调试错误的基本需求。但在处理错误的更好，即这个内置的错误，萨斯还推出了附加指令的顶部@error，@warn和@debug。
Sass @error和@warn指令允许您引发自定义错误消息。例如，当您基于Sass创建设计系统或框架时，此附加功能非常有用。如果他们使用不赞成使用的mixins或传递正确的值，则希望它抛出一条消息，例如：
|
1个
2
3
4
|
@mixin border-radius( $rad ) { @warn "The `border-radius()` mixin will be deprecated in version 5.2, use `corner-radius()` mixin instead"; border-radius: $rad;} |
该@debug指令的工作方式类似于console.log()JavaScript或var_dump()PHP中的。这是一个例子。
|
1个
2
3
4
5
|
$space: 10px;div { @debug $space; margin: ($spaces * 2);} |
以上将输出：
较少：在相同情况下，LESS错误消息显示得更好。首先，它显示了错误的整个代码块，而不是仅显示有问题的行，并突出显示了错误。LESS目前不提供特殊指令来处理自定义错误，例如Sass。
网站建设
结论： Sass和LESS都可以很好地处理错误，但是Sass进一步通过附加指令处理自定义错误消息，因此对Sass来说是一个胜利。
得分：无礼（4）–较少（1）
文献资料
文档对于每个产品都是至关重要的部分。即使是经验丰富的开发人员也会发现，如果没有文档，很难做事。
Sass：Sass文档很整洁。每个部分均分为小节。选项卡中还提供了代码示例，其中包括三个部分，分别是Sass，SCSS和CSS的已编译版本，这有助于全面了解如何编译Sass / SCSS代码。
更少：简洁的文档。它分为小节和小节，并且还提供了带有已编译输出的代码示例，尽管它没有布置在选项卡中。
网站建设
结论：Sass和LESS文档都很好地介绍了，因此我认为我们可以称之为“平手”。
到目前为止的得分： Sass（5）-LESS（2）。
最终思想
我认为这是一个明确的结论，Sass的总分为5分，而 LESS 的总分为2分，因此更好。最后，最终用户仍然可以选择自己选择的CSS预处理器。无论是Sass还是LESS，只要他们感到舒适且生产力更高，那么这就是他们的赢家。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/262235.html