Sass 与 Less 语法差异

Sass 和 Less 在语法、功能、生态上存在显著差异，选择时需权衡。

变量定义

// Sass：$ 前缀
$primary-color: #3498db;
$font-size: 14px;

.button {
  color: $primary-color;
}

// Less：@ 前缀
@primary-color: #3498db;
@font-size: 14px;

.button {
  color: @primary-color;
}

嵌套语法

两者嵌套语法基本相同：

// Sass & Less 通用
.nav {
  ul {
    list-style: none;
  }

  a {
    color: blue;

    &:hover {
      color: red;
    }
  }
}

差异：属性嵌套

// Sass 支持
.font {
  font: {
    family: Arial;
    size: 14px;
    weight: bold;
  }
}

// Less 不支持属性嵌套

Mixin 定义

// Sass：@mixin / @include
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

// Less：类选择器语法
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  .flex-center();
}

继承

// Sass：@extend
.button {
  padding: 10px;
}

.button-primary {
  @extend .button;
  background: blue;
}

// Less：:extend()
.button {
  padding: 10px;
}

.button-primary {
  &:extend(.button);
  background: blue;
}

函数

// Sass：@function
@function px-to-rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}

.text {
  font-size: px-to-rem(14px);
}

// Less：无原生函数，通过 Mixin 模拟或 JS 插件
.px-to-rem(@px, @base: 16px) {
  font-size: (@px / @base) * 1rem;
}

条件语句

// Sass：@if
@mixin theme($mode) {
  @if $mode == dark {
    background: #333;
    color: #fff;
  } @else {
    background: #fff;
    color: #333;
  }
}

// Less：Mixin 守卫
.theme(@mode) when (@mode = dark) {
  background: #333;
  color: #fff;
}
.theme(@mode) when (@mode = light) {
  background: #fff;
  color: #333;
}

循环语句

// Sass：@for / @each / @while
@for $i from 1 through 5 {
  .col-#{$i} { width: 20% * $i; }
}

@each $color in primary, success, danger {
  .btn-#{$color} { background: $color; }
}

// Less：递归 Mixin
.generate-cols(@n, @i: 1) when (@i =< @n) {
  .col-@{i} { width: 20% * @i; }
  .generate-cols(@n, @i + 1);
}
.generate-cols(5);

模块导入

// Sass 新版：@use（推荐）
@use 'variables' as v;
@use 'mixins' as m;

.button {
  color: v.$primary;
  @include m.flex-center;
}

// Sass 旧版：@import（已弃用）
@import 'variables';

// Less：@import
@import 'variables';
@import (reference) 'mixins';  // 不输出样式

功能对比总表

生态与工具

选择建议

选择 Sass 的场景：

• 大型项目，需要模块化
• 使用 Bootstrap 5+、Foundation
• 需要复杂函数和 Map 数据结构
• 团队熟悉现代前端工具链

选择 Less 的场景：

• 快速上手，学习成本低
• 使用 Ant Design、Bootstrap 3/4
• 项目较简单，无需复杂功能
• 团队熟悉 JavaScript 生态

要点总结

• Sass 功能更强大，支持函数、Map、现代模块系统
• Less 语法更接近 CSS，学习成本低
• Sass 变量用 $，Less 用 @
• Sass 循环语法直观，Less 需递归实现
• 大型项目推荐 Sass，快速开发可选 Less
• 两者都支持嵌套、Mixin、继承等核心特性