Sass和Less的区别【前端】

Sass
Less
- Less的定义
- 写法
- 主要特性：
- - 变量
  - 嵌套
  - Mixin（混入）
  - 继承（Extend）
  - 运算
  - 条件语句
  - 循环
  - 导入
对比表
[什么时候用 Sass？什么时候用 Less？](#什么时候用 Sass？什么时候用 Less？)
- [推荐用 Sass 的情况](#推荐用 Sass 的情况)
- [推荐用 Less 的情况](#推荐用 Less 的情况)

Sass

Sass的定义

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

写法

主要有两种语法：

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

主要特性：

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

变量

css 复制代码

$primary-color: #42b983;

.button {
  background: $primary-color;
}

嵌套

css 复制代码

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

Mixin（混入）

css 复制代码

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

.box {
  @include flex-center;
}

继承（Extend）

css 复制代码

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

.card {
  @extend %base;
}

运算

css 复制代码

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

条件语句

css 复制代码

$theme: light;

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

循环

css 复制代码

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

编译后：

css 复制代码

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

模块化

css 复制代码

// 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 和递归实现）

变量

css 复制代码

@primary-color: #42b983;

.button {
  background: @primary-color;
}

嵌套

css 复制代码

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

Mixin（混入）

css 复制代码

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

.box {
  .flex-center();
}

继承（Extend）

css 复制代码

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

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

运算

css 复制代码

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

条件语句

css 复制代码

@theme: light;

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

循环

css 复制代码

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

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

编译后：

css 复制代码

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

导入

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

css 复制代码

@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的定义

写法

主要特性：

变量

嵌套

Mixin（混入）

继承（Extend）

运算

条件语句

循环

模块化

Less

Less的定义

写法

主要特性：

变量

嵌套

Mixin（混入）

继承（Extend）

运算

条件语句

循环

导入

对比表

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

推荐用 Sass 的情况

推荐用 Less 的情况