为什么 SASS 被认为比 LESS 更好？

SASS (Syntactically Awesome StyleSheets) 和LESS (Leaner CSS) 是 CSS 预处理器或 CSS 的扩展。预处理器可以说是一种编程和脚本语言，旨在更好的外观、主题质量、可服务性和可扩展性，因为它扩展了 CSS，然后将其编译回常规 CSS。

SASS优于LESS的主要优点是它提供了大多数编程语言都知道的循环和大小写区分，因此减少了重复并轻松完成工作，它基于 Ruby，而LESS让用户有机会在某些情况下激活 mixins情况发生但使用 JavaScript。让我们详细了解一下SASS 与 LESS的优势。

SASS 相对 LESS 的优势：现在我们将说明 SASS 可以做什么，Less 不能做什么：

• 语法：我们可以省略花括号 ( { } ) 和分号 ( ; )
• 使用默认变量：我们可以通过使用常规变量来覆盖它
• 嵌套选择器：我们可以在 SASS 中使用另一个选择器中的父引用来做到这一点
• if 语句：在 LESS 中，它们被认为是不寻常的语法
• 使用条件运算符：例如： a < 5 ?真假
• 在选择器和属性名称中插入 if 语句
• 精度：可以对涉及十进制数的计算进行全局精度的自定义
• Python Resemblance： SASS 的相似之处很像Python

Compass 库： SASS 的主要优点之一是它的Compass库，它为我们提供了许多常见的 CSS 习惯用法、CSS3 功能所需的标准 hack，无需浏览器前缀，还有助于自动生成精灵图像的 CSS。

让我们考虑一个例子，最好有一个函数允许您将颜色存储为变量，而不是总是将颜色值输入为十六进制数字，我们可以使用 SASS 做这些事情。 SASS 的“不要重复自己”的理论推动它避免代码重复并保持源代码更精简。这显着降低了努力余量。此外，您可以在中心位置进行一次更改来完成工作，而不是在多个不同的地方进行更改。

让我们了解我们如何在 SASS 和 LESS 中编写代码以获得相同的 CSS 输出。

变量声明：对于声明变量，SASS 使用$符号，LESS 使用@符号。

SASS 代码：

CSS

$font-color: #fff
$bg-color: #00f
   
#box
  color: $font-color
  background: $bg-color

更少的代码：

CSS

@font-color: #fff;
@bg-color: #00f
   
#box{
    color: @font-color;
    background: @bg-color;
}

输出：编译后的 CSS 两者都将如下所示。

CSS

#box {
    color: #fff;
    background: #00f;
}

继承：对于继承类，都使用extend关键字，但是它们的语法略有不同。

SASS 代码：

CSS

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

更少的代码：

CSS

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

输出：

CSS

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

比较表（ SASS vs LESS）：让我们来看看 SASS 和 LESS 之间的主要区别：

Basis of Comparison	SASS	LESS
Definition	SASS is a CSS preprocessor that assists with reducing redundancies in CSS and in the end saves time. They are extensions of CSS, which helps in saving time. It gives a few features which can be utilized to make stylesheets and assist with keeping up with the code. It is viewed as a superset of CSS and it is coded in Ruby.	LESS is a CSS preprocessor that empowers a client to customize, utilize and reuse stylesheets for a site. LESS is a dynamic language that can be utilized on various programs. It is written in JavaScript and compiles quickly. It ensures code modularity,readability and makes code easily changeable.
Functions	It enables to create your very own functions and utilize them with the context client wants. They can be called upon by using the function’s name and with any parameters and arguments. Eg. – The Mixin functions can be called globally and also accept different arguments. Values can be returned using @return.	It uses JavaScript for the Manipulation of parameters. It uses predefined functions to bring changes to HTML elements and manipulates different aspects of a stylesheet. It has functions for varying colors like ceil function, round function, floor function, and floor function.
Error Reporting	SASS can report errors in syntax.	LESS provides error messages in all tests accurately giving the correct location where an error is located.
Documentation	Its documentation focuses on knowledge base and setup. It doesn’t provide appealing visuals.	Its documentation has a very appealing visual. It also has very easy to do and follow steps.
Features	It is very stable and compatible with other several versions of CSS. Considered as a superset of CSS and is written in Ruby. It compiles readable CSS as its own syntax. It’s open-source.	Agile tool and  it helps in decreasing the redundancy New styles can be created as per requirement, and can be reused anywhere anytime Organized coding practices. Developed on JavaScript and a superset of CSS.

结论：SASS和LESS两种预处理器在 Web 开发人员中都很流行。使用 SASS，您可以轻松地选择它们的语法，并且可以决定何时远离 CSS 规则。而在某些情况下，客户端可以在某些情况下激活mixins的功能中享受到好处的用户较少。 SASS 同样提供开发人员知道的循环和案例。因此，它绝对依赖于 Web 开发人员和他们喜欢的任何语言的任务必要性。这两种语言都有其优点和缺点。最后，选定的总是会帮助您提供已开发的最佳功能。