Less

Less是一种动态的样式表语言，可以编译为CSS。它在功能和特性上类似于Sass，但其语法更简单。Less的一个关键优势是它能够使用JavaScript函数来创建动态的CSS值。Less还支持嵌套规则、混合和变量。

示例：

@primary-color: #007bff;

.button {
  background-color: @primary-color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

.box {
  .button;
  border: 1px solid @primary-color;
}

Less还提供了一些高级功能，例如作用域和命名空间等。通过使用作用域和命名空间，可以更好地组织和管理Less代码，避免命名冲突和样式污染。

Sass

Sass代表Syntactically Awesome Style Sheets。它是一种预处理器，可以编译为CSS，并为CSS增加了额外的功能，例如变量、混合、函数和嵌套。Sass有两种语法选项：Sass（缩进语法）和SCSS（Sassy CSS）。Sass使用空格缩进来定义代码块，而SCSS具有更传统的CSS语法。

示例：

$primary-color: #007bff;

.button
  background-color: $primary-color
  color: white
  padding: 10px 20px
  border-radius: 5px

.box
  @include button
  border: 1px solid $primary-color

SCSS

SCSS（Sassy CSS）是一种非常流行的CSS预处理器，它可以让开发人员更加高效地编写CSS代码。

示例：

$primary-color: #007bff;

@mixin button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

.button {
  @include button;
}

.box {
  @include button;
  border: 1px solid $primary-color;
  width: calc(50% - #{($padding * 2)});
}