网站建设用到的Sass与LESS对比,哪个比较好用?

有流行的CSS预处理器LESS和Sass。CSS预处理器的主要目的是通过引入一些编程功能(例如变量,混合和条件),使CSS的编写更加动态,更有条理和更具生产力。现在的问题是,这两个中哪个做得更好? 为了做出决定,我们将在多个因素中比较这两个因素:表现较好的一个获得1分;如果出现平局,双方将获得1分。 让我们开 WP网站建设

有流行的CSS预处理器LESSSassCSS预处理器的主要目的是通过引入一些编程功能(例如变量,混合和条件),使CSS的编写更加动态,更有条理和更具生产力。现在的问题是,这两个中哪个做得更好?

为了做出决定,我们将在多个因素中比较这两个因素:表现较好的一个获得1分;如果出现平局,双方将获得1分。

让我们开始。

安装

让我们从最基本的步骤Installation开始。Sass和LESS建立在不同的平台上。

Sass: Sass需要使用C ++编写的编译器,并且需要该指定语言的编译器的实现者。如果您的项目在Node.js应用程序上运行,则需要安装Node编译器GoPythonRuby甚至C#都有一个。

该编译器的大小非常大,因此可能需要一段时间才能通过慢速的Internet连接进行下载。此外,每个平台版本也可能需要不同版本的编译器,因此您将需要下载兼容的编译器。

LESS:另一方面,LESS纯粹是用JavaScript编写的。安装LESS就像将JavaScript库链接到HTML文档一样容易。有一些GUI应用程序可帮助将LESS编译为CSS,其中大多数是免费的并且运行良好(例如WinLessLESS.app)。

结论:LESS易于安装且快速。它不需要休编译器来使其运行

语言能力

每个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和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;
}

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

运作方式

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

错误处理

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

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

网站建设用到的Sass与LESS对比,哪个比较好用?

该错误消息非常简单。它说有一个未定义的变量(的确如此),并突出显示有问题的变量。我们还可以查看导致此错误的行。它具有调试错误的基本需求。但在处理错误的更好,即这个内置的错误,萨斯还推出了附加指令的顶部@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);
}

以上将输出:

网站建设用到的Sass与LESS对比,哪个比较好用?

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

WordPress网站建设

WordPress网站建设

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

文献资料

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

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

网站建设用到的Sass与LESS对比,哪个比较好用?

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

WordPress网站建设

WordPress网站建设

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

最终思想

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

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10466

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code