ZDecode
CSS

预处理器

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。

本文仅仅对比 less/sass

相同

两者都支持以下功能:

  • ✅ 变量(Variables)
  • ✅ 嵌套语法(Nesting)
  • ✅ 混入(Mixins)
  • ✅ 运算(Operations)
  • ✅ 函数(Functions)
  • ✅ 模块化导入(@import)
  • ✅ 自定义函数/逻辑控制(如条件、循环)

区别

特性LessSass (SCSS)
语法接近 CSS,基于 JS 写的有两种语法(Sass 和 SCSS)
主流语法格式.less.scss(更接近 CSS,主流)
变量声明@color: red;$color: red;
编译依赖基于 Node.jsDart Sass(官方推荐)、Node Sass(已弃)
支持条件、循环有限(需结合 JS)强大(内置 @if, @for, @each 等)
混入(mixin)用 . 定义,如 .clearfix()用 @mixin 和 @include
模块导入@import(老方式)@use/@forward(Sass 模块化推荐)
社区活跃度较弱更强,使用范围更广

On this page