Sass和Less的区别【前端】

原创于 2025-09-22 18:10:07 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

12 篇文章

订阅专栏

7 篇文章

订阅专栏

Sass

Sass 是一种 CSS 预处理器（CSS Preprocessor），它扩展了 CSS 的功能。

主要有两种语法：

$primary-color: #42b983;

.button {
  background: $primary-color;
}

.nav {
  ul {
    li {
      a {
        color: blue;
      }
    }
  }
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex-center;
}

%base {
  border: 1px solid #ccc;
  padding: 10px;
}

.card {
  @extend %base;
}

.container {
  width: 600px + 200px; // 800px
}

$theme: light;

@if $theme == light {
  body { background: white; }
} @else {
  body { background: black; }
}

@for $i from 1 through 3 {
  .m-#{$i} {
    margin: $i * 10px;
  }
}

编译后：

m-1 { 
	margin: 10px; 
} 
.m-2 { 
	margin: 20px; 
} 
.m-3 { 
	margin: 30px; 
}

// math 模块
@use "sass:math";

.container {
  width: math.div(600px, 960px) * 100%;
}

Less 也是一种 CSS 预处理器，与 Sass 类似，但更简洁、更接近 CSS。

直接写 .less 文件，语法和 CSS 几乎一样，只是加了一些增强功能。

@primary-color: #42b983;

.button {
  background: @primary-color;
}

.nav {
  ul {
    li {
      a {
        color: blue;
      }
    }
  }
}

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  .flex-center();
}

.base {
  border: 1px solid #ccc;
  padding: 10px;
}

.card {
  &:extend(.base);
}

.container {
  width: (600px + 200px); // 800px
}

@theme: light;

body when (@theme = light) {
  background: white;
}
body when (@theme = dark) {
  background: black;
}

.loop(@i) when (@i <= 3) {
  .m-@{i} {
    margin: (@i * 10px);
  }
  .loop(@i + 1);
}
.loop(1);

编译结果一样，但 Less 需要递归写法。
编译后：

m-1 { 
	margin: 10px; 
} 
.m-2 { 
	margin: 20px; 
} 
.m-3 { 
	margin: 30px; 
}

（Less 只有 @import，没有 Sass 的模块系统）

@import "variables.less";

.container {
  width: (600px / 960px * 100%);
}

对比点	Sass	Less
诞生背景	2006 年，由 Ruby 社区开发，后有 Dart 实现（dart-sass，现在是官方主流）	2009 年，由 JS 社区开发，更贴近前端生态
语言依赖	早期依赖 Ruby，现在用 Dart 或 Node.js 编译（推荐 `dart-sass`）	基于 JavaScript，Node.js/浏览器就能直接跑
文件后缀	`.scss`（推荐）或 `.sass`（缩进风格）	`.less`
变量符号	`$`（如 `$primary-color: #42b983;`）	`@`（如 `@primary-color: #42b983;`）
语法风格	功能全面，支持逻辑（循环、条件）、函数库（math、color 等）	语法更接近 CSS，学习曲线平滑，功能相对轻量
编译速度	dart-sass 性能好，活跃维护	less 编译也快，但生态热度下降
生态支持	Bootstrap、Foundation、Angular、Vue CLI 默认推荐	Ant Design、Element UI、国内前端 UI 库多用 Less
社区活跃度	活跃度高、功能持续增强	维护正常，但更新较慢
兼容性	`.scss` 语法几乎是 CSS 超集，可以直接把 `.css` 改成 `.scss` 用	和 CSS 也很接近，但部分写法（运算等）需要额外括号