Sass和Less的区别【前端】

Sass

Sass的定义

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

写法

主要有两种语法：

• .sass（缩进语法，不用大括号和分号，较老）
• .scss（Sassy CSS，语法几乎和 CSS 一样，现在主流写法）

主要特性：

• 变量（$color）
• 嵌套规则
• Mixin（混入）
• 继承（@extend）
• 控制语句（@if、@for、@each）
• 模块化（@use / @forward）

变量

$primary-color: #42b983;.button {background: $primary-color;
}

嵌套

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

Mixin（混入）

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

继承（Extend）

%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

Less的定义

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

写法

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

主要特性：

• 变量（@color）
• 嵌套规则
• Mixin（.center()）
• 运算（(100px + 50px)）
• 函数（lighten()、darken()）
• 条件 & 循环（通过 when 和递归实现）

变量

@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 {.flex-center();
}

继承（Extend）

.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 也很接近，但部分写法（运算等）需要额外括号

什么时候用 Sass？什么时候用 Less？

推荐用 Sass 的情况

• 大型/国际化项目，需要更复杂的样式逻辑（函数、循环、条件判断）。
• 团队需要长期维护，追求更强的功能和生态。
• 框架或工具链默认集成 Sass（如 Vue CLI、Angular、Bootstrap 5）。

推荐用 Less 的情况

• 项目依赖国内 UI 库（Ant Design、Element UI、iView 等），它们本身就是用 Less 写的 →方便覆盖变量定制主题。
• 中小型项目，需求简单，团队更习惯接近原生 CSS 的写法。
• 想快速上手，前端环境（Node.js、浏览器）就能直接用。