对于只会用他们的嵌套功能的前端，在开发多租户项目时，遇到了不同租户的样式隔离功能，现在做出功能总结方便后续使用。
1.基本信息
|---------------|--------------------|
| Less | Sass |
| 语法更接近原生 CSS | 语法类似 CSS（使用大括号和分号） |
| 文件后缀为 .less | 后缀 .scss |
2.安装
| 方式 | Less | Sass |
|---|---|---|
| Node.js 工具 | npm install -g less |
npm install -g sass |
| 构建工具集成 | Webpack（less-loader）、Gulp（gulp-less） |
Webpack（sass-loader）、Gulp（gulp-sass） |
| GUI 工具 | Koala、CodeKit | Koala、CodeKit |
| 在线编译 | Less2CSS | SassMeister |
3.语法对比
3.1 变量
用于存储颜色、尺寸等重复使用的值，便于统一维护
| 特性 | Less（@符号） | Sass（$ 符号） |
|---|---|---|
| 基本用法 | @color: #f00; .box { color: @color; } |
$color: #f00; .box { color: $color; } |
| 作用域 | 块级作用域（内层变量覆盖外层） | 全局作用域（需用!global声明全局变量） |
3.2 嵌套
模拟 HTML 结构的层级关系，减少代码冗余，提高可读性。
| 特性 | Less | Sass（SCSS） |
|---|---|---|
| 基本嵌套 | 与 SCSS 一致 | css .nav { color: #333; a { text-decoration: none; } &:hover { color: #f00; } } |
| 媒体查询嵌套 | 支持在选择器内嵌套媒体查询 | 支持在选择器内嵌套媒体查询 |
3.3 混合
封装可复用的样式片段，类似 "函数"，可传递参数
| 特性 | Less | Sass（SCSS） |
|---|---|---|
| 无参混合 | 直接使用类选择器作为混合 css .border{border: 1px solid #000;} .box{.border} |
需用@mixin定义，@include引用 css @mixin border{border:1px solid #fff;} .box{@include border} |
| 带参混合 | css //1px为默认值 .border(@width:1px){ border:1px solid #fff; } .box{.border(2px)} |
css @mixin border($width: 1px){ border: $width solid #000; } .box { @include border(2px); } |
| 复杂逻辑 | 支持简单条件判断（when） |
支持复杂条件、循环等逻辑 |
3.4 继承
复用另一个选择器的样式，生成更简洁的 CSS（合并选择器）
| 特性 | Less | Sass（SCSS） |
|---|---|---|
| 语法 | 使用:extend() css .base { color: #333; } .box:extend(.base) { font-size: 14px; } |
使用@extend css .base { color: #333; } .box { @extend .base; font-size: 14px; } |
| 注意 | 不支持继承带参数的混合 | 支持继承更复杂的选择器（如伪类） |
3.5 运算
支持数字、颜色、尺寸的运算，简化计算逻辑
| 特性 | Less | Sass（SCSS） |
|---|---|---|
| 数字运算 | css @width: 100px; .box { width: @width / 2; } |
css $width: 100px; .box { width: $width / 2; } |
| 颜色运算 | css @color: #000 + #333; |
css $color: #000 + #333; |
| 单位处理 | 需保证单位一致（如100px + 50会报错） |
自动处理单位（如100px + 50 → 150px） |
3.6 导入
拆分样式文件，通过@import合并，减少 HTTP 请求
| 特性 | Less | Sass（SCSS） |
|---|---|---|
| 基本用法 | @import "reset.less";（可省略后缀） |
@import "reset.scss";（可省略后缀） |
| 局部文件 | 无特殊命名规范 | 文件名以_开头（如_reset.scss），导入时可省略_和后缀 |
| 编译时机 | 运行时导入（会生成多个请求，需提前编译） | 编译时合并（仅生成一个 CSS 文件） |
3.7 函数与逻辑控制
提供内置函数和流程控制，实现复杂样式逻辑。
| 特性 | Less | Sass（SCSS） |
|---|---|---|
| 内置函数 | 较少（如lighten()、darken()处理颜色） |
丰富（颜色、字符串、列表等，如adjust-hue()、str-length()） |
| 条件判断 | 简单when判断 .mixin(@a) when (@a > 10) { ... } |
@if/@else完整判断 @if $a > 10 { ... } @else { ... } |
| 循环 | 仅支持each遍历列表（较新版本） |
支持@for、@each、@while循环 @for $i from 1 to 3 {.col-#{$i} { width: 100% / 3 * $i; }} |
4.总结
| 对比维度 | Less | Sass（SCSS） |
|---|---|---|
| 语法友好度 | 更接近 CSS，学习成本低 | 略复杂，但功能更全面 |
| 功能丰富度 | 基础功能满足日常需求 | 支持复杂逻辑（循环、多条件），内置函数更多 |
| 生态与工具 | 工具较少，依赖 Less.js | 生态完善（如 Compass 框架），工具支持广泛 |
| 适用场景 | 小型项目、快速开发、团队熟悉 CSS | 大型项目、复杂样式逻辑、需要高度定制化 |