CSS 预处理器：Sass/Less 基础语法与实战

1. 预处理器价值解决原生 CSS 无变量、无嵌套、无逻辑、难以复用的问题提升工程化效率。2. 核心通用能力变量定义主题色、尺寸统一管理嵌套语法结构清晰、贴合HTML层级混合mixin复用代码片段继承、条件判断、循环文件拆分、模块化3. Sass vs LessLess基于JS、入门简单、适合小型项目Sass功能更强、生态更好、企业主流、Vue/React 项目标配4. 实战常用语法示例// 变量 $primary: #1677ff; // 嵌套 .box{ color: $primary; :hover{ opacity: 0.8; } } // 混合 mixin center(){ display: flex; justify-content: center; align-items: center; } .wrap{ include center(); }