CSS 语法学习文档（十三）

第十三篇：CSS 工程化与预处理器

目录

[第十三篇：CSS 工程化与预处理器](#第十三篇：CSS 工程化与预处理器)

[13.1 预处理器概述](#13.1 预处理器概述)

[13.1.1 Sass/SCSS、Less、Stylus 特性对比](#13.1.1 Sass/SCSS、Less、Stylus 特性对比)

主流预处理器特性对比表

[13.1.2 嵌套、变量、混入、函数、继承](#13.1.2 嵌套、变量、混入、函数、继承)

变量：统一定义主题色，一处修改全局生效

[嵌套：清晰体现 DOM 结构，避免重复写父类名](#嵌套：清晰体现 DOM 结构，避免重复写父类名)

[混入：类似 JS 函数，复用代码块，甚至可以传参](#混入：类似 JS 函数，复用代码块，甚至可以传参)

函数：进行数值计算

继承：让一个类共享另一个类的样式

[13.1.3 原生 CSS 嵌套与预处理器的取舍](#13.1.3 原生 CSS 嵌套与预处理器的取舍)

取舍决策表

总结

[13.2 PostCSS 与工具链](#13.2 PostCSS 与工具链)

[13.2.1 PostCSS 作用与常用插件](#13.2.1 PostCSS 作用与常用插件)

必知插件速查表

输入：开发者写的标准代码

[输出：PostCSS 处理后的代码（自动补全旧浏览器前缀）](#输出：PostCSS 处理后的代码（自动补全旧浏览器前缀）)

[13.2.2 与构建工具的集成](#13.2.2 与构建工具的集成)

[13.3 CSS 模块化方案](#13.3 CSS 模块化方案)

[13.3.1 CSS Modules 原理与使用](#13.3.1 CSS Modules 原理与使用)

[13.3.2 CSS-in-JS 方案简介](#13.3.2 CSS-in-JS 方案简介)

[13.3.3 Scoped CSS（Vue Scoped）原理](#13.3.3 Scoped CSS（Vue Scoped）原理)

[13.3.4 UnoCSS / Tailwind CSS（原子化 CSS）工程化实践](#13.3.4 UnoCSS / Tailwind CSS（原子化 CSS）工程化实践)

---

随着前端项目的规模不断扩大，手写原生 CSS 已难以满足维护效率、代码复用和团队协作的需求。

CSS 工程化应运而生，它不仅引入了预处理器来增强语法，还通过模块化方案解决了样式冲突这一顽疾。

13.1 预处理器概述

预处理器是 CSS 工程化的基石。

它在原生 CSS 之上增加了一层"编程外壳"，允许开发者使用变量、嵌套、函数等编程特性，最终编译成浏览器可读的标准 CSS。

13.1.1 Sass/SCSS、Less、Stylus 特性对比

虽然市面上有三种主流预处理器，但目前 Sass (SCSS) 几乎统治了主流框架和生态。

了解它们的差异有助于在维护遗留项目时做出判断。

主流预处理器特性对比表

|-----------|-------------------------|------------------------|-------------------------|
| 特性 | Sass / SCSS | Less | Stylus |
| 现状 | 行业标准，Dart Sass 官方推荐 | 逐渐边缘化（Bootstrap 5 已弃用） | 社区活跃度一般，多用于旧项目 |
| 语法风格 | SCSS 兼容 CSS（有花括号） | 类似 CSS，但部分语法有差异 | 极简，可省略花括号、冒号（Python 风格） |
| 变量符号 | $color | @color | 无符号，直接赋值 |
| 嵌套逻辑 | 支持，原生 CSS 嵌套的蓝本 | 支持，功能稍弱 | 支持，非常灵活 |
| 工程化能力 | 极强（@use, @forward 模块系统） | 较弱 | 中等 |

13.1.2 嵌套、变量、混入、函数、继承

预处理器的核心价值在于消除重复。

以下代码以目前最流行的 SCSS 语法为例，展示五大核心特性。

变量：统一定义主题色，一处修改全局生效

$primary-color: #3498db;

$spacing-unit: 10px;

嵌套：清晰体现 DOM 结构，避免重复写父类名

.card {

  background: white;

  padding: $spacing-unit * 2;

  /* 解释：使用 & 符号引用父选择器，等同于 .card:hover */

  &:hover {

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  }

  .card-title {

    color: $primary-color;

  }

}

混入：类似 JS 函数，复用代码块，甚至可以传参

@mixin flex-center {

  display: flex;

  justify-content: center;

  align-items: center;

}

.box {

  /* 解释：直接引入代码块 */

  @include flex-center;

}

函数：进行数值计算

@function double($n) {

  @return $n * 2;

}

.container {

  /* 解释：调用函数，计算宽度 */

  width: double(100px);

}

继承：让一个类共享另一个类的样式

%message-base {

  padding: 10px;

  border: 1px solid #ccc;

}

.success {

  /* 解释：继承 %message-base 的所有样式 */

  @extend %message-base;

  border-color: green;

}

13.1.3 原生 CSS 嵌套与预处理器的取舍

随着 CSS Nesting (& {}) 语法在主流浏览器中的落地，一个尖锐的问题出现了：还需要预处理器吗？

取舍决策表

|-----------------------|---------------|----------------------------------|
| 需求场景 | 推荐方案 | 理由 |
| 简单 / 中型项目 | 纯 CSS | 原生嵌套已足够，无需编译步骤，加载更快。 |
| 复杂设计系统 | Sass/SCSS | 需要强大的函数库、循环、@use 模块系统和 Map 数据结构。 |
| 需要深度逻辑 | Sass/SCSS | 原生 CSS 尚不支持复杂的 @for 循环和条件判断。 |

总结

1. 原生 CSS 嵌套就像"自动挡汽车"，日常代步（大部分开发）足够方便；
2. 预处理器则是"手动挡赛车"，在赛道上（复杂的 UI 组件库、超大型项目）能提供更精细的控制和更强的动力。
3. 除非项目极其复杂，否则建议优先尝试原生 CSS。

13.2 PostCSS 与工具链

如果说预处理器是"高级语言"，那 PostCSS 就是"编译器"和"插件生态"。

它本身不修改 CSS，而是提供插件机制来转换 CSS。

13.2.1 PostCSS 作用与常用插件

PostCSS 是一个用 JavaScript 插件转换 CSS 的工具。

它具备解析、修改、重新生成 CSS 的能力。

PostCSS 的作用与 Babel 对 JS 的处理如出一辙：

将现代的、实验性的 CSS 代码，转换成浏览器当前能兼容的代码。

必知插件速查表

|------------------------|----------------|-------------------------------------|
| 插件名称 | 一句人话功能 | 典型应用 |
| Autoprefixer | 自动加浏览器前缀 | 以前写 display: flex，它自动补 -webkit-flex |
| postcss-preset-env | 下一代 CSS 转换 | 将 CSS Nesting 转为旧版浏览器兼容语法 |
| cssnano | 压缩与优化 | 删除空格、注释，优化 z-index 结构，减小体积 |
| PostCSS Modules | CSS Modules 支持 | 自动将类名哈希化，实现样式局部化 |

输入：开发者写的标准代码

.box {

  display: flex;

  user-select: none;

  backdrop-filter: blur(10px);

}

输出：PostCSS 处理后的代码（自动补全旧浏览器前缀）

.box {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  -webkit-backdrop-filter: blur(10px);

          backdrop-filter: blur(10px);

}

13.2.2 与构建工具的集成

在现代前端工程（如 Vite, Webpack）中，PostCSS 通常是默认集成的，开发者无需手动调用 API。

代码模块：配置示例

// postcss.config.js

module.exports = {

  plugins: {

    // 解释：自动根据目标浏览器添加前缀

    autoprefixer: {},

    // 解释：允许使用最新的 CSS 特性，它会按需加载 polyfill

    'postcss-preset-env': {

      stage: 3, // 解释：指定处理哪个阶段的 CSS 特性

      features: {

        'nesting-rules': true // 解释：开启对 CSS 嵌套的降级支持

      }

    },

    // 解释：生产环境开启压缩

    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})

  }

}

13.3 CSS 模块化方案

当项目极其庞大时，全局 CSS 会导致严重的"样式污染"（A 组件的样式意外覆盖了 B 组件）。

模块化方案就是为了解决"样式隔离"而生的。

13.3.1 CSS Modules 原理与使用

CSS Modules 并不是一门新语言，而是一种构建时的运行机制。

它在编译阶段自动将类名转换为唯一的哈希值。

代码：使用与原理

/* Button.module.css */

.base {

  padding: 10px;

  background: red;

}

// App.js

import styles from './Button.module.css';

// 编译后，styles.base 可能变成 "Button_base__1x2y"

// HTML ：<button class="Button_base__1x2y">Click</button>

// 这确保了该样式绝对唯一，不会污染全局

function App() {

  return <button className={styles.base}>Click</button>;

}

总结

1. CSS Modules 就像给每个人都发了一个"代号"。
2. 明明大家都叫"班长"，但在花名册（编译后的代码）里，张三是"班长_8823"，李四是"班长_9912"。这样谁也不会认错人。

13.3.2 CSS-in-JS 方案简介

CSS-in-JS 直接在 JavaScript 文件中编写 CSS，样式随组件一起加载和卸载。最著名的代表是 styled-components。

优缺点对比表

|----------|--------------------------|-------------------|
| 维度 | CSS-in-JS | CSS Modules |
| 样式隔离 | 完美（动态生成唯一类名） | 完美（编译生成哈希） |
| 动态样式 | 极强 （可直接根据 props 改颜色） | 较弱（需拼接类名或 CSS 变量） |
| 性能 | 较差（运行时解析，有 JS 开销） | 极好（编译时生成，仅 CSS） |
| 适用场景 | React 复杂组件库、需要动态主题 | 通用 Web 开发、追求性能 |

13.3.3 Scoped CSS（Vue Scoped）原理

这是 Vue 框架独有的模块化方案，通过 HTML 属性选择器实现作用域隔离。

代码：属性隔离机制

<template>

  <!-- Vue 会自动给组件内最外层元素加上 data-v-xxxx 属性 -->

  <div class="box" data-v-123456></div>

</template>

<style scoped>

/* 编译后：Vue 会自动给选择器加上属性选择器 */

.box[data-v-123456] {

  color: red;

}

/* 注意：这解释了为什么深度选择器 `:deep()` 的存在，因为子组件没有 data-v-xxxx */

</style>

总结

1. Vue Scoped 就像给每个组件的样式贴上了"专属标签"。
2. 样式声明时自带"仅限带此标签的元素使用"的限制，从而实现隔离。

13.3.4 UnoCSS / Tailwind CSS（原子化 CSS）工程化实践

这是目前最激进的工程化方向。

它不再写自定义 CSS 类，而是直接在 HTML 中写 utility classes（工具类）。

原子化 CSS 提供一系列低粒度的工具类（如 p-4, flex, text-red-500），开发者通过组合这些类来构建界面，以此消除 CSS 文件的体积和心智负担。

代码：原子化思维

<!-- 传统写法：写个 class，再去 CSS 里写样式 -->

<div class="card"></div>

<!-- 原子化写法（Tailwind/UnoCSS）：直接在 HTML 里"拼乐高" -->

<div class="

  p-4          /* padding: 1rem */

  bg-white     /* background: white */

  rounded-lg   /* border-radius: 0.5rem */

  shadow-md    /* box-shadow: ... */

  flex         /* display: flex */

  justify-center /* justify-content: center */

">

  Content

</div>

总结

1. 原子化 CSS 就像"乐高积木"。
2. 以前是"造模具"（写一个 .card 类），现在是用现成的积木块（p-4, flex）直接拼成想要的形状。
3. 虽然 HTML 看起来很长，但 CSS 文件几乎为 0，且永远不会出现样式冲突。