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

1. 预处理器价值

解决原生 CSS 无变量、无嵌套、无逻辑、难以复用的问题，提升工程化效率。

---

2. 核心通用能力

• 变量定义（主题色、尺寸统一管理）

• 嵌套语法（结构清晰、贴合HTML层级）

• 混合mixin（复用代码片段）

• 继承、条件判断、循环

• 文件拆分、模块化

---

3. Sass vs Less

• Less：基于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(); }