Sass和Less的区别

Epicurus
223 阅读3分钟

Sass和Less的区别

Sass 和 Less 是两种流行的 CSS 预处理器，它们扩展了 CSS 的功能，提供了变量、嵌套、混合（Mixins）、函数等高级特性，使得编写和维护 CSS 更加高效和灵活。尽管它们的目标相似，但在语法、功能和使用方式上有一些区别。以下是 Sass 和 Less 的详细对比：

  1. 语法差异

Sass

  • 两种语法：
    • Sass（缩进语法）：使用缩进代替大括号和分号，文件扩展名为 .sass。 
      $primary-color: #333

body
  font-family: Arial
  color: $primary-color
    • SCSS（Sassy CSS）：语法与普通 CSS 完全兼容，文件扩展名为 .scss。 
      $primary-color: #333;

body {
  font-family: Arial;
  color: $primary-color;
}
  • 默认推荐：SCSS 是 Sass 的主流语法，因为它更接近原生 CSS。

Less

  • 一种语法：
    • Less 的语法与 CSS 完全兼容，文件扩展名为 .less。 
      @primary-color: #333;

body {
  font-family: Arial;
  color: @primary-color;
}
  • 特点：Less 的语法更简单，适合直接从 CSS 迁移。
  1. 变量

Sass

  • 使用 $ 定义变量。 
    $primary-color: #333;
body {
  color: $primary-color;
}

Less

  • 使用 @ 定义变量。 
    @primary-color: #333;
body {
  color: @primary-color;
}
  1. 嵌套

Sass 和 Less

  • 两者都支持嵌套语法，写法几乎一致。

    // Sass/SCSS
nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}

    // Less
nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}
  1. 混合（Mixins）

Sass

  • 使用 @mixin 定义混合，使用 @include 调用。 
    @mixin border-radius($radius) {
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

Less

  • 直接使用类名定义混合，调用时直接引用。 
    .border-radius(@radius) {
  border-radius: @radius;
}

.button {
  .border-radius(5px);
}
  1. 继承

Sass

  • 使用 @extend 实现继承。 
    .message {
  border: 1px solid #ccc;
  padding: 10px;
}

.success {
  @extend .message;
  border-color: green;
}

Less

  • 使用混合（Mixins）模拟继承。 
    .message {
  border: 1px solid #ccc;
  padding: 10px;
}

.success {
  .message();
  border-color: green;
}
  1. 函数

Sass

  • 内置了大量函数（如颜色操作、数学计算等），也支持自定义函数。 
    @function calculate-rem($px) {
  @return $px / 16 * 1rem;
}

body {
  font-size: calculate-rem(16);
}

Less

  • 内置函数较少，但支持基本的颜色和数学操作。 
    body {
  font-size: unit(16 / 16, rem);
}
  1. 条件与循环

Sass

  • 支持 @if、@for、@each 和 @while。 
    @for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

Less

  • 支持 when 条件语句和递归混合实现循环。 
    .loop(@i) when (@i > 0) {
  .item-@{i} {
    width: 100px * @i;
  }
  .loop(@i - 1);
}
.loop(3);
  1. 导入（Import）

Sass

  • 支持导入 .scss 或 .sass 文件，导入的文件会被合并编译。 
    @import "variables";
@import "mixins";

Less

  • 支持导入 .less 文件，导入的文件会被合并编译。 
    @import "variables.less";
@import "mixins.less";
  1. 生态系统与工具

Sass

  • 工具：Dart Sass（官方实现）、Node Sass（已弃用）、LibSass（已弃用）。
  • 框架：Compass（已弃用）、Bourbon。
  • 社区：Sass 社区活跃，插件和工具丰富。

Less

  • 工具：Less.js（官方实现）。
  • 框架：Bootstrap（早期版本使用 Less）。
  • 社区：Less 社区相对较小，但仍有广泛使用。
  1. 性能
  • Sass：Dart Sass 是官方推荐的工具，性能较好。
  • Less：Less.js 的性能稍逊于 Dart Sass，但在大多数场景下差异不明显。
  1. 兼容性
  • Sass：需要编译为 CSS，浏览器无法直接解析。
  • Less：可以通过 Less.js 在浏览器中直接解析，但生产环境通常也会编译为 CSS。

总结

特性SassLess
语法支持.sass 和 .scss仅支持.less
变量$ 定义变量@ 定义变量
混合@mixin 和 @include直接使用类名
继承@extend通过混合模拟
函数内置函数丰富，支持自定义函数内置函数较少
条件与循环支持@if、@for、@each 等支持when 和递归混合
生态系统社区活跃，工具丰富社区较小，但仍有广泛使用
性能Dart Sass 性能较好Less.js 性能稍逊
兼容性需要编译为 CSS可通过 Less.js 直接解析

如何选择？

  • 选择 Sass：

    • 如果需要更强大的功能（如自定义函数、复杂的逻辑控制）。
    • 如果项目依赖 Sass 的生态系统（如 Compass、Bourbon）。
    • 如果团队熟悉 Sass 或 SCSS 语法。

  • 选择 Less：

    • 如果需要更简单的语法和快速上手。
    • 如果项目依赖 Less 的生态系统（如早期版本的 Bootstrap）。
    • 如果需要在浏览器中直接解析 Less。

根据项目需求和团队熟悉程度选择合适的预处理器即可。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝