SASS vs LESS：它们之间有什么区别？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS 预处理器是非常有用的工具，它们可以帮助我们编写更加优雅、易于维护的 CSS 代码。SASS 和 LESS 是两种非常流行的 CSS 预处理器，它们都有自己的特点和优势，但也有一些不同之处。

SASS

SASS 是一种基于 Ruby 的 CSS 预处理器，它提供了许多有用的功能，如变量、嵌套、混合、继承等。SASS 的语法比较严格，需要使用缩进来表示代码块，这可以使代码更加清晰易懂。

变量

SASS 中的变量可以用来存储任何值，包括颜色、字体、尺寸等。使用变量可以使代码更加易于维护，例如：

// javascriptcn.com 代码示例
$primary-color: #007bff;
$secondary-color: #6c757d;

.btn-primary {
  background-color: $primary-color;
  color: #fff;
}

.btn-secondary {
  background-color: $secondary-color;
  color: #fff;
}

嵌套

SASS 中的嵌套可以使代码更加清晰易懂，可以将相关的样式放在一起。例如：

// javascriptcn.com 代码示例
.navbar {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  .navbar-brand {
    font-size: 1.25rem;
    font-weight: 500;
    color: #007bff;
  }
  .nav-link {
    color: #6c757d;
    &:hover {
      color: #007bff;
    }
  }
}

混合

SASS 中的混合可以用来重用一组样式，可以将一些常用的样式封装成混合，然后在需要使用的地方调用。例如：

// javascriptcn.com 代码示例
@mixin button-styles {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out,
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
}

.btn {
  @include button-styles;
}

.btn-primary {
  @include button-styles;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

继承

SASS 中的继承可以用来重用一组样式，可以将一些常用的样式封装成父类，然后在需要使用的地方继承。例如：

// javascriptcn.com 代码示例
.panel {
  padding: 1rem;
  border: 1px solid #dcdfe6;
  border-radius: 0.25rem;
}

.panel-primary {
  @extend .panel;
  border-color: #007bff;
}

LESS

LESS 是一种基于 JavaScript 的 CSS 预处理器，它也提供了许多有用的功能，如变量、嵌套、混合、继承等。LESS 的语法比较宽松，可以使用大括号来表示代码块，这可以使代码更加灵活。

变量

LESS 中的变量可以用来存储任何值，包括颜色、字体、尺寸等。使用变量可以使代码更加易于维护，例如：

// javascriptcn.com 代码示例
@primary-color: #007bff;
@secondary-color: #6c757d;

.btn-primary {
  background-color: @primary-color;
  color: #fff;
}

.btn-secondary {
  background-color: @secondary-color;
  color: #fff;
}

嵌套

LESS 中的嵌套可以使代码更加清晰易懂，可以将相关的样式放在一起。例如：

// javascriptcn.com 代码示例
.navbar {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  .navbar-brand {
    font-size: 1.25rem;
    font-weight: 500;
    color: #007bff;
  }
  .nav-link {
    color: #6c757d;
    &:hover {
      color: #007bff;
    }
  }
}

混合

LESS 中的混合可以用来重用一组样式，可以将一些常用的样式封装成混合，然后在需要使用的地方调用。例如：

// javascriptcn.com 代码示例
.button-styles() {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out,
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
}

.btn {
  .button-styles;
}

.btn-primary {
  .button-styles;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

继承

LESS 中的继承可以用来重用一组样式，可以将一些常用的样式封装成父类，然后在需要使用的地方继承。例如：

// javascriptcn.com 代码示例
.panel {
  padding: 1rem;
  border: 1px solid #dcdfe6;
  border-radius: 0.25rem;
}

.panel-primary {
  &:extend(.panel);
  border-color: #007bff;
}

区别

SASS 和 LESS 有很多相似之处，但也有一些不同之处。

语法

SASS 的语法比较严格，需要使用缩进来表示代码块，这可以使代码更加清晰易懂。LESS 的语法比较宽松，可以使用大括号来表示代码块，这可以使代码更加灵活。

变量

SASS 和 LESS 中的变量功能相同，但语法不同。SASS 使用 $ 符号来表示变量，LESS 使用 @ 符号来表示变量。

混合

SASS 和 LESS 中的混合功能相同，但语法不同。SASS 使用 @mixin 来定义混合，使用 @include 来调用混合；LESS 使用 () 来定义混合，使用 . 来调用混合。

继承

SASS 和 LESS 中的继承功能相同，但语法不同。SASS 使用 @extend 来继承父类，LESS 使用 &:extend() 来继承父类。

总结

SASS 和 LESS 都是非常优秀的 CSS 预处理器，它们都有自己的特点和优势。选择哪种预处理器取决于个人的喜好和项目的需求。无论选择哪种预处理器，都应该注意代码的可读性和易于维护性，这是前端开发的重要原则。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657810b1d2f5e1655d1e856c