CSS、Less、Sass（含 SCSS）、Stylus

CSS、Less、Sass含 SCSS、Stylus一、CSS原生层叠样式表往期链接CSS语法学习文档 - 汇总篇-CSDN博客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往期链接SCSS语法学习文档 - 汇总篇-CSDN博客Sass 是预处理器名称提供两种语法SCSSmixin、if等大括号分号完全兼容 CSS缩进语法.sass无大括号分号靠缩进。当前主流实现为Dart Sass最新 1.83.ximport已弃用全面转向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 为唯一主流LibSassNode-sass已停更老项目迁移需成本。缩进语法.sass与 JS/HTML 习惯差异大团队协作易因空格缩进出错。四、Stylus最新版本0.63.02024年初发布后续更新缓慢核心特征极简语法花括号、分号、冒号均可省略靠缩进和换行界定规则与 Python 类似。透明混合定义和调用混合无需特殊符号直接写属性/选择器调用时就像写普通属性。变量$或裸标识符均可如color red访问作用域灵活甚至可沿调用栈向上“属性查找”。强大的编程特性支持if / else、for in循环、内置函数数学、颜色、图像尺寸等可直接嵌入 JavaScript 表达式。动态作用域与父引用可引用父级的属性值构建动态样式。内置函数丰富覆盖路径、图像处理、单位转换等无需额外配置。条件导入与压缩输出支持特定媒体/条件下导入编译时可生成多种压缩级别。主要缺陷语法过于自由不同开发者写出的代码风格差异极大强制规范性差长期维护成本高。社区小、更新极慢0.63.0 之后几乎停滞新 CSS 特性跟进不及时存在被淘汰风险。调试困难编译错误信息有时晦涩与主流工具如 DevTools的 Source Map 映射偶现问题。缺少类似 Sass 的丰富内置模块和严格作用域控制大型项目易发生样式泄露和冲突。编辑器和 IDE 的智能提示、代码格式化支持普遍弱于 SCSS/Less。五、核心区别对比表维度CSS最新原生LessSass (SCSS)Stylus变量符号--varvar$var$var或裸名嵌套原生嵌套需符号开头标准嵌套多拼接标准嵌套属性嵌套兼容原生缩进嵌套极简混合(Mixin)无靠类组合.mixin()调用参数守卫mixin/include功能最强透明混合调用无需关键词继承无:where可辅助:extend()伪类继承extend 占位符%内建extend使用较少条件/循环无依赖媒体/容器查询递归 when守卫 eachif for each while全套if/else、for in直接嵌入 JS函数定义无calc()有限需通过 JS 插件function return内置丰富模块可定义函数支持 JS 表达式模块系统layer提供部分分层命名空间 导入use/forward强作用域模块导入 无强制作用域编译依赖浏览器原生支持Node.js / 浏览器端Dart Sass / NodeNode.js学习曲线低但需跟进新特性中中高高语法过灵活生态与维护标准全浏览器跟进成熟中小项目常用极成熟社区最大主流框架内置社区萎缩维护风险高输出控制直接生效可配置压缩、sourcemap压缩、sourcemap、调试信息完善压缩、sourcemap 基本支持六、总结与选型建议CSS原生能力已大幅提升中小型项目或对构建工具零依赖的诉求下完全可以不引入预处理器搭配 PostCSS 可弥补部分不足。Less学习成本低适合从 CSS 渐进迁移、对逻辑需求不复杂的团队但在复杂逻辑和大型工程中能力上限不如 Sass。SassSCSS仍是最强、最活跃的 CSS 预处理器拥有最完善的编程特性、模块系统和社区生态是多数中大型项目的首选。Stylus因其极度灵活的语法和停滞的维护状态已不再推荐用于新项目除非团队有强偏好并愿承担维护风险。