关于less/sass两个css预处理器的总结

对于只会用他们的嵌套功能的前端，在开发多租户项目时，遇到了不同租户的样式隔离功能，现在做出功能总结方便后续使用。

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 一致	.nav {color: #333;a {text-decoration: none;}&:hover {color: #f00;} }
媒体查询嵌套	支持在选择器内嵌套媒体查询	支持在选择器内嵌套媒体查询

3.3 混合

封装可复用的样式片段，类似 “函数”，可传递参数

特性	Less	Sass（SCSS）
无参混合	直接使用类选择器作为混合 .border{border: 1px solid #000;} .box{.border}	需用@mixin定义，@include引用 @mixin border{border:1px solid #fff;} .box{@include border}
带参混合	//1px为默认值 .border(@width:1px){border:1px solid #fff; } .box{.border(2px)}	@mixin border($width: 1px){border: $width solid #000; } .box { @include border(2px); }
复杂逻辑	支持简单条件判断（when）	支持复杂条件、循环等逻辑

3.4 继承

复用另一个选择器的样式，生成更简洁的 CSS（合并选择器）

特性	Less	Sass（SCSS）
语法	使用:extend() .base { color: #333; } .box:extend(.base) { font-size: 14px; }	使用@extend .base { color: #333; } .box { @extend .base; font-size: 14px; }
注意	不支持继承带参数的混合	支持继承更复杂的选择器（如伪类）

3.5 运算

支持数字、颜色、尺寸的运算，简化计算逻辑

特性	Less	Sass（SCSS）
数字运算	@width: 100px; .box { width: @width / 2; }	$width: 100px; .box { width: $width / 2; }
颜色运算	@color: #000 + #333;	$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	大型项目、复杂样式逻辑、需要高度定制化