您的位置: 首页  >  文章  >  CSS预处理器比较：Sass与LESS

CSS预处理器比较：Sass与LESS

分类: 文章 • 2024-06-25 09:16:52

有流行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 

nav {
	margin: 50px auto 0;
	width: 788px;
	height: 45px;
	ul {
		padding: 0;
		margin: 0;
	}
}

但是Sass / SCSS通过允许我们也嵌套单个属性使此方法更进一步，这是一个示例： 

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;
		}
 	}
}

此代码将生成以下输出。 

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 

@mixin border-radius ($values) {
	border-radius: $values;
}

nav {
	margin: 50px auto 0;
	width: 788px;
	height: 45px;
	@include border-radius(10px);
}

减 

.border( @radius ) {
	border-radius: @radius;
}
nav {
	margin: 50px auto 0;
	width: 788px;
	height: 45px;
	.border(10px);
}

Mixins将复制属性并将其添加到定义的位置。

遗产

Sass和LESS都通过所谓的Inheritance继承 。 这个概念与Mixins完全相同，但是它不是复制整个CSS属性，而是使用来对具有完全相同的set属性和值的选择器进行分组。 Sass使用@extends而LESS使用:extend伪类。

请看下面的示例：

Sass / SCSS 

.circle {
	border: 1px solid #ccc;
	border-radius: 50px;
	overflow: hidden;
}
.avatar {
	@extend .circle;
}

较少 ： 

.circle {
	border: 1px solid #ccc;
	border-radius: 50px;
	overflow: hidden;
}

.avatar:extend(.circle) {}

该代码的结果为： 

.circle, .avatar {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}

推荐读物 ： 选择器继承的简便方法：@extend简介

结论 ：Sass和LESS都工作得很好，除了LESS :extend伪类看起来很奇怪，特别是如果我们没有在选择器中添加其他属性，或者与CSS标准伪类（如:not和:nth-child一起使用的话:nth-child 。 因此，我认为Sass可以更好地实现此功能。

到目前为止的得分：无礼（2）–较少（1）

运作方式

Sass和LESS都可以执行基本的数学运算，但是可能返回不同的结果。 查看他们如何执行此随机计算：

Sass / SCSS 

$margin: 10px;
div {
	margin: $margin - 10%; /* Syntax error: Incompatible units: '%' and 'px' */
}

减 

@margin: 10px;
div {
	margin: @margin - 10%; /* = 0px */
}

结论 ：在这种情况下，Sass可以更准确地完成操作； 由于％和px不相等，因此应返回错误。 虽然，我实际上希望它可以是10px – 10％= 9px 。

到目前为止的得分：无礼（3）-少（1）

错误处理

错误通知也是使调试代码更加容易的重要因素。 想象一下混乱中某处的数千行代码和少量错误。 明确的错误通知将是快速找出问题的最佳方法。

Sass ：在此示例中，我将通过CLI运行编译Sass。 当Sass看到有效的代码时，它将生成一个错误通知。 在这种情况下，我们将删除未定义的变量，这肯定会引发错误。 看一下下面的截图。

CSS预处理器比较：Sass与LESS

该错误消息非常简单。 它说有一个未定义的变量（的确如此），并突出显示有问题的变量。 我们还可以查看导致此错误的行。 它具有调试错误的基本需求。 但在处理错误的更好，即这个内置的错误，萨斯还推出了附加指令的顶部@error ， @warn和@debug 。

Sass @error和@warn指令允许您引发自定义错误消息。 例如，当您基于Sass创建设计系统或框架时，此附加功能非常有用。 如果他们使用不赞成使用的mixins或传递正确的值，则希望它抛出一条消息，例如： 

@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指令的工作方式类似于JavaScript中的console.log()或PHP中的var_dump() 。 这是一个例子。 

$space: 10px;
div {
	@debug $space;
	margin: ($spaces * 2);
}

以上将输出：

CSS预处理器比较：Sass与LESS

较少 ：在相同情况下，LESS错误消息显示得更好。 首先，它显示了错误的整个代码块，而不是仅显示有问题的行，并突出显示了错误。 LESS目前不提供特殊指令来处理自定义错误，例如Sass。

CSS预处理器比较：Sass与LESS

结论： Sass和LESS都可以很好地处理错误，但是Sass进一步通过附加指令处理自定义错误消息，因此对Sass来说是一个胜利。

得分 ：无礼（4）–较少（1）

文献资料

文档对于每个产品都是至关重要的部分。 即使是经验丰富的开发人员也会发现，如果没有文档 ，很难做事。

Sass ：Sass文档很整洁。 每个部分均分为小节。 选项卡中还提供了代码示例，其中包括三个部分，分别是Sass，SCSS和CSS的已编译版本，这有助于全面了解如何编译Sass / SCSS代码。

CSS预处理器比较：Sass与LESS

更少 ：简洁的文档。 它分为小节和小节，并且还提供了带有已编译输出的代码示例，尽管它没有布置在选项卡中。

CSS预处理器比较：Sass与LESS

结论 ：Sass和LESS文档都很好地介绍了，因此我认为我们可以称之为“平手”。

到目前为止的得分： Sass（5）-LESS（2）。

最终思想

我认为这是一个明确的结论， Sass的总分为5分， 而 LESS的总分为2分， 因此更好 。 最后，最终用户仍然可以选择自己选择CSS预处理器。 无论是Sass还是LESS，只要他们感到舒适且生产力更高，那么这就是他们中的赢家。

最后，如果您对此主题有任何想法，请随时在下面的评论框中分享。

翻译自: https://www.hongkiat.com/blog/sass-vs-less/

相关推荐