解析预编译CSS技术

预编译 CSS 技术（如 Sass、Less、Stylus）通过 扩展原生 CSS 语法，引入变量、嵌套、混合宏等特性，显著提升 CSS 的 可维护性、复用性 与 开发效率，成为现代前端工程化的重要环节。其核心价值在于 代码抽象、模块化 与 工程化支持，助力开发者应对复杂样式管理需求。

---

一、预编译 CSS 的核心特性与优势

1. 变量（Variables）

• 作用：集中管理颜色、尺寸等重复值，提升一致性。
• 原生对比：CSS 变量（var(--primary-color)）存在兼容性限制，预编译变量编译后直接替换为静态值。

// Sass 变量
$primary-color: #1890ff;
.button { background: $primary-color; }

2. 嵌套（Nesting）

• 作用：简化层级结构，避免重复书写父选择器。
• 示例：

// Less 嵌套
.nav {
  padding: 10px;
  &-item { color: #333; } // 编译为 .nav-item
  &:hover { background: #f5f5f5; } // 编译为 .nav:hover
}

3. 混合宏（Mixins）

• 作用：复用代码块，支持参数传递。

// Sass 混合宏
@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}
.container { @include flex-center(column); }

4. 函数与运算（Functions & Operat