CSS、Less、Sass（含 SCSS）、Stylus
一、CSS（原生层叠样式表）
往期链接：
CSS前端布局总指南_mdn css 布局手册-CSDN博客
最新动态
现代浏览器已原生支持嵌套、容器查询、:has()、级联层 @layer、作用域 @scope、锚点定位、视图过渡、滚动驱动动画等。CSS 正从"描述性语言"向"具备一定逻辑和响应能力"演进。
核心特征
变量 ：通过 --* 自定义属性，可继承、可参与级联，支持运行时更改。
嵌套 ：原生 CSS 嵌套（& 代表父选择器），减少重复，但要求嵌套规则必须以符号开头（如 &）。
容器查询 ：@container 根据父容器尺寸而非视口尺寸应用样式。
级联层 ：@layer 精确控制样式优先级，便于管理大型项目的样式覆盖。
条件选择器 ：:has() 实现"父选择器"效果，根据后代决定父元素样式。
新视口单位 ：dvh, svh, lvh 解决移动端视口动态变化问题。
颜色扩展 ：OKLCH 等广色域颜色、color-mix() 混合函数。
动画增强 ：滚动驱动动画、离散属性过渡（如 display）。
主要缺陷
依然是声明式语言，不支持循环、条件判断、自定义函数等编程特性（无法写逻辑）。
动态计算能力有限（calc() 仍较原始，无法定义复杂公式）。
缺少"混合/继承"抽象机制，重复代码需依靠类组合，冗余度高于预处理器。
浏览器兼容性仍有差异，部分新特性需渐进增强。
二、Less
最新版本
Less 4.2（稳定，基于 JavaScript）
核心特征
变量 ：@ 符号，如 @primary: #333；支持插值和懒加载，可在选择器、URL 中使用。
嵌套与父选择器 ：标准嵌套；支持多个 & 实现复杂父选择器拼接（4.0+）。
混合（ Mixin ） ：可直接复用类名样式；支持带参数、默认值的参数化混合；可通过 when 守卫实现条件混合。
运算与函数 ：数值、颜色、字符串运算；内置数学函数（sin, cos, pow, sqrt 等 4.2 增强）、颜色操作函数（如 darken, lighten，部分已支持 OKLCH 空间）。
命名空间与映射 ：可组织变量和混合，支持 #namespace > .mixin() 访问；映射可作为只读对象遍历。
循环 ：通过递归混合模拟循环，或使用 each() 遍历列表和映射。
导入 ：@import 可内联多个文件，支持参考导入（reference）、懒加载。
插件系统：可通过 JavaScript 扩展自定义函数（需运行环境支持）。
主要缺陷
内置无原生 if/for/while****控制流，复杂逻辑只能靠守卫和递归模拟，可读性较差。
早期基于 JavaScript 编译（Less.js 浏览器端），大型项目编译效率不如 Dart Sass。
部分高级功能（如 @extend 继承）易产生冗余选择器，相比 Sass 功能较弱。
社区和生态规模小于 Sass，插件和框架默认集成度较低。
自定义函数无法在纯 Less 中定义，必须借助 JS，限制了可移植性。
三、Sass（含 SCSS 与缩进语法 .sass）
往期链接：
Sass 是预处理器名称，提供两种语法：
SCSS （@mixin、@if 等，大括号分号，完全兼容 CSS）
缩进语法（.sass，无大括号分号，靠缩进）。
当前主流实现为 Dart Sass （最新 1.83.x），@import 已弃用，全面转向 @use 模块系统。
核心特征
变量 ：$ 定义，如 $color: red；可通过 !default 覆盖，作用域清晰。
嵌套与父选择器 ：与 Less 类似，& 代表父级，支持嵌套属性（如 font: { weight: bold; }）。
混合与继承 ：@mixin / @include 传参复用；@extend 实现选择器群组继承，配合 %placeholder 减少输出冗余。
编程控制 ：完整的 @if、@for、@each、@while 指令，可遍历 map、list。
函数与模块化 ：@function 自定义返回值；@use、@forward 构建命名空间模块，内置模块 sass:math、sass:map、sass:color 等取代全局函数。
插值与静默注释 ：#{} 插入动态值，// 静默注释不输出到 CSS。
原生 CSS 嵌套兼容：最新版允许直接书写原生嵌套，并能与 Sass 嵌套无缝混用。
调试 ：@debug、@warn、@error 提供强大调试能力。
主要缺陷
必须经过编译（Dart/Node），增加构建步骤。
SCSS 语法灵活，滥用 @extend 可能生成臃肿选择器、降低渲染性能。
学习曲线较原生 CSS / Less 更陡，特别是模块系统（@use 规则、作用域等）新用户上手慢。
编译器选择：Dart Sass 为唯一主流，LibSass（Node-sass）已停更，老项目迁移需成本。
缩进语法（.sass）与 JS/HTML 习惯差异大，团队协作易因空格缩进出错。
四、Stylus
最新版本
0.63.0（2024年初发布，后续更新缓慢）
核心特征
极简语法：花括号、分号、冒号均可省略，靠缩进和换行界定规则（与 Python 类似）。
透明混合：定义和调用混合无需特殊符号，直接写属性/选择器，调用时就像写普通属性。
变量 ：$ 或裸标识符均可，如 color = red，访问作用域灵活，甚至可沿调用栈向上"属性查找"。
强大的编程特性 ：支持 if / else、for in 循环、内置函数（数学、颜色、图像尺寸等），可直接嵌入 JavaScript 表达式。
动态作用域与父引用：可引用父级的属性值，构建动态样式。
内置函数丰富：覆盖路径、图像处理、单位转换等，无需额外配置。
条件导入与压缩输出：支持特定媒体/条件下导入，编译时可生成多种压缩级别。
主要缺陷
语法过于自由，不同开发者写出的代码风格差异极大，强制规范性差，长期维护成本高。
社区小、更新极慢：0.63.0 之后几乎停滞，新 CSS 特性跟进不及时，存在被淘汰风险。
调试困难，编译错误信息有时晦涩，与主流工具（如 DevTools）的 Source Map 映射偶现问题。
缺少类似 Sass 的丰富内置模块和严格作用域控制，大型项目易发生样式泄露和冲突。
编辑器和 IDE 的智能提示、代码格式化支持普遍弱于 SCSS/Less。
五、核心区别对比表
|---------------------|--------------------|-------------------------|----------------------------|----------------------------|
| 维度 | CSS （最新原生） | Less | Sass (SCSS) | Stylus |
| 变量符号 | --var | @var | $var | $var 或裸名 |
| 嵌套 | 原生嵌套（需符号开头） | 标准嵌套，多 & 拼接 | 标准嵌套，属性嵌套，兼容原生 | 缩进嵌套，极简 |
| 混合 (Mixin) | 无（靠类组合） | .mixin() 调用，参数+守卫 | @mixin / @include，功能最强 | 透明混合，调用无需关键词 |
| 继承 | 无（:where 可辅助） | :extend() 伪类继承 | @extend + 占位符 % | 内建 @extend，使用较少 |
| 条件 / 循环 | 无（依赖媒体/容器查询） | 递归 + when 守卫 + each | @if @for @each @while 全套 | if/else、for in，直接嵌入 JS |
| 函数定义 | 无（calc() 有限） | 需通过 JS 插件 | @function @return，内置丰富模块 | 可定义函数，支持 JS 表达式 |
| 模块系统 | @layer 提供部分分层 | 命名空间 + 导入 | @use/@forward 强作用域模块 | 导入 + 无强制作用域 |
| 编译依赖 | 浏览器原生支持 | Node.js / 浏览器端 | Dart Sass / Node | Node.js |
| 学习曲线 | 低（但需跟进新特性） | 中 | 中高 | 高（语法过灵活） |
| 生态与维护 | 标准，全浏览器跟进 | 成熟，中小项目常用 | 极成熟，社区最大，主流框架内置 | 社区萎缩，维护风险高 |
| 输出控制 | 直接生效 | 可配置压缩、sourcemap | 压缩、sourcemap、调试信息完善 | 压缩、sourcemap 基本支持 |
六、总结与选型建议
CSS 原生能力已大幅提升：中小型项目或对构建工具零依赖的诉求下，完全可以不引入预处理器，搭配 PostCSS 可弥补部分不足。
Less 学习成本低，适合从 CSS 渐进迁移、对逻辑需求不复杂的团队；但在复杂逻辑和大型工程中，能力上限不如 Sass。
Sass （ SCSS ） 仍是最强、最活跃的 CSS 预处理器，拥有最完善的编程特性、模块系统和社区生态，是多数中大型项目的首选。
Stylus 因其极度灵活的语法和停滞的维护状态，已不再推荐用于新项目，除非团队有强偏好并愿承担维护风险。