UD5工具箱
术语表
以下收录了与 PostCSS 和 CSS 后处理相关的核心术语和概念。掌握这些术语将帮助您更好地理解 PostCSS 生态系统。
PostCSS
PostCSS 是一个使用 JavaScript 插件来转换 CSS 的工具。它本身并不是一个 CSS 预处理器，而是一个 CSS 后处理器框架。PostCSS 将 CSS 解析为抽象语法树（AST），然后通过一系列插件对 AST 进行修改，最后将修改后的 AST 重新生成为 CSS 代码。这种设计使得 PostCSS 具有极高的灵活性和可扩展性。
AST（抽象语法树）
AST 是 Abstract Syntax Tree 的缩写，即抽象语法树。PostCSS 在处理 CSS 时，首先将源代码解析为树形结构的 AST。每个 CSS 规则、属性、值都被表示为树中的节点。插件通过遍历和修改这棵树来实现对 CSS 的转换。理解 AST 的概念对于编写自定义 PostCSS 插件非常重要。
PostCSS 插件
PostCSS 插件是遵循特定接口规范的 JavaScript 模块，用于对 CSS 进行特定的转换操作。每个插件负责一个独立的功能，例如自动添加前缀、支持 CSS 变量、压缩代码等。插件通过操作 AST 来实现转换，多个插件可以串联形成处理管道。PostCSS 拥有数百个社区维护的插件，覆盖了 CSS 处理的方方面面。
Autoprefixer
Autoprefixer 是 PostCSS 生态中最著名的插件之一，用于根据 Can I Use 数据库自动为 CSS 属性添加必要的浏览器前缀。它根据配置的目标浏览器列表，分析每个 CSS 属性的兼容性情况，自动添加 -webkit-、-moz-、-ms-、-o- 等前缀。开发者无需手动编写带前缀的 CSS 代码，Autoprefixer 会自动处理一切。
postcss-nesting
postcss-nesting 是一个实现 CSS 原生嵌套语法的 PostCSS 插件。它允许开发者在 CSS 中使用嵌套选择器，使代码的层级结构更加清晰。该插件实现了 W3C CSS Nesting 规范的语法，将嵌套规则展开为标准的扁平 CSS 选择器。嵌套语法大幅提升了 CSS 代码的组织性和可读性。
CSS 嵌套
CSS 嵌套是一种允许在一个选择器内部定义子选择器的语法特性。传统的 CSS 要求每个选择器都是独立的，导致相关联的样式分散在各处。嵌套语法通过缩进层级清晰地表达选择器之间的关系，使 CSS 代码更加模块化和易于维护。现代浏览器已经开始原生支持 CSS 嵌套语法。
浏览器前缀
浏览器前缀是浏览器厂商在 CSS 属性尚未标准化时添加的标识符，用于支持实验性的 CSS 特性。常见的前缀包括：-webkit-（Chrome、Safari、新版 Edge）、-moz-（Firefox）、-ms-（IE 和旧版 Edge）、-o-（旧版 Opera）。随着 CSS 标准化推进，许多前缀已经不再需要，但为了兼容旧版浏览器，开发者仍然需要在某些情况下使用前缀。
PostCSS 插件管道
PostCSS 插件管道是指多个 PostCSS 插件按照指定顺序依次执行的处理流程。每个插件接收前一个插件输出的 AST，进行自己的转换后再传递给下一个插件。管道机制使得复杂的 CSS 处理任务可以被分解为多个独立的、可复用的插件。管道中插件的顺序很重要，不恰当的顺序可能导致意外的转换结果。
CSS 变量（自定义属性）
CSS 变量，也称为 CSS 自定义属性，允许在 CSS 中定义可复用的值。通过 --property-name 语法定义变量，使用 var(--property-name) 引用变量值。PostCSS 通过 postcss-custom-properties 等插件可以为不支持原生 CSS 变量的浏览器提供降级方案。CSS 变量是现代 CSS 中最重要的特性之一。
Source Map
Source Map 是一种映射文件，用于将转换后的代码映射回原始源代码的位置。PostCSS 在处理 CSS 时可以生成 Source Map，使得浏览器开发者工具中显示的样式信息对应到原始的 CSS 源文件而非转换后的代码。这对于调试非常有用，开发者可以直接在浏览器中定位并修改原始 CSS 代码。