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

最新推荐文章于 2025-08-21 16:44:59 发布

原创最新推荐文章于 2025-08-21 16:44:59 发布 · 821 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #less #sass

javascript进步（组件+指令+问题）专栏收录该内容

8 篇文章

订阅专栏

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

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 一致

特性	Less	Sass（SCSS）
基本嵌套	与 SCSS 一致	`.nav { color: #333; a { text-decoration: none; } &:hover { color: #f00; } }`
媒体查询嵌套	支持在选择器内嵌套媒体查询	支持在选择器内嵌套媒体查询

.nav {
  color: #333;
    a {
      text-decoration: none;
    }
    &:hover {
      color: #f00;
    }
}

媒体查询嵌套支持在选择器内嵌套媒体查询支持在选择器内嵌套媒体查询

3.3 混合

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

特性 Less Sass（SCSS）

无参混合

特性	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`）	支持复杂条件、循环等逻辑

直接使用类选择器作为混合

.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）

语法

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

使用: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	大型项目、复杂样式逻辑、需要高度定制化