LESS 和 SASS 有什么区别？

本文旨在强调两个 CSS 预处理器 LESS 和 SASS 之间的关键特性和区别。在直接进入差异部分之前，首先让我们谈谈这两个预处理器。如果您不了解此预处理器的基础知识，请参阅 LESS & SASS。

LESS：它是一种更精简的样式表，本质上是动态的，并且可以有效地实现自定义和可重用性。 LESS 支持跨浏览器友好。它基于 JavaScript，具有非常精确的错误报告以及指示错误的确切位置。它通过让用户创建变量和混入等属性来在整个项目中创建动态和可重用的值，从而有助于提高可读性和可重用性。它使用 Preboot.less 来实现 mixins。

例子：

LESS

@selector: box; //using variables
  
.@{selector} {
  font-weight: semi-bold;
  line-weight: 20px;
}

CSS 输出：

CSS

.box {
 font-weight: semi-bold;
 line-weight: 20px;
}

SASS：它是一个语法上很棒的样式表，支持所有版本兼容的 CSS 扩展，从而提高了代码的可重用性。它使用 Ruby 实现并主动报告语法错误。它使用 compass 扩展来实现 mixins，也使用户能够实现自己的功能。它还允许用户创建代码可重用性，例如变量和 mixin。

例子：

SASS

a {
  color: white;
  
  // Nesting
  &:hover {
    text-decoration: none;
  }
  
  :not(&) {
    text-decoration: underline;
  }
}

CSS 输出：

CSS

a {
  color: white;
}
a:hover {
  text-decoration: none;
}
:not(a) {
  text-decoration: underline;
}

相似之处

1. 它们在语法方面是相似的。

   • 较少的：

     @color: white; /*@color is a LESS variable*/
     #header {
       color: @color;
     }

   • 萨斯：

     $color: white; /* $color is a SASS variable */
     #header {
       color: $color;
     }

2. 我们可以在 SASS 和 LESS 中使用 mixins 和变量等属性。

SASS 和 LESS 的区别：

SASS	LESS
It is based on Ruby, which needs to be installed in order to run on windows.	Initially based in ruby but ported to JavaScript now. Only needs to have applicable javascript files installed to run.
Reports errors made in syntax.	More precise error reporting with an indication of the location of the error.
Uses Compass extension for implementing mixins.	Uses Preboot.less extension to implement of mixins.
Enables users to create their own functions.	Use JavaScript to manipulate values.
Use “$” for variables and “@” for mixins.	Use “@” for variables.

示例：对于混合

较少的：

较少的

.margined {
  margin-bottom: 1rem;
  margin-top: 2rem;
}
#box h1 {
  font: Roboto, sans-serif;
  .margined;
}
.cont a {
  color: blue;
  .margined;
}

CSS 输出：

CSS

#box h1 {
  font: Roboto, sans-serif;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
.cont a {
  color: blue;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

萨斯：

SASS

@mixin margined {
  margin-bottom: 1rem;
  margin-top: 2rem;
}
#box h1 {
  @include margined;
  font: Roboto, sans-serif;
}
.cont a {
  @include margined;
  color: blue;
}

CSS 输出：

CSS

#box h1 {
  margin-bottom: 1rem;
  margin-top: 2rem;
  font: Roboto, sans-serif;
}
.cont a {
  margin-bottom: 1rem;
  margin-top: 2rem;
  color: blue;
}