Emmet 的 CSS 缩写功能包括哪些?

Emmet 的 CSS 缩写功能主要包含四类：CSS 属性缩写（把 m10 展开成 margin: 10px;）、自动添加厂商前缀（Vendor prefixes）、渐变值缩写（Gradients），以及模糊搜索（Fuzzy search）。这些能力都写在 docs.emmet.io 的 CSS Abbreviations 章节下，适用于在支持 Emmet 的编辑器里编写 CSS、LESS、SCSS 等样式表。需要说明的是，文档只描述了这些功能本身，并未说明它们是否需要额外配置或插件。

CSS 属性缩写

Emmet 的核心思路是把 CSS 属性名和值压缩成类似 CSS 的表达式，输入后由编辑器动态解析并展开。例如输入 m10，展开结果是：

margin: 10px;

它的解析规则大致是：取属性名的缩写部分，后面跟的值按 CSS 单位规则补全。多个属性可以写成一条链式表达式，一次展开成多行声明。这与 HTML 缩写是同一套机制——文档里强调 Emmet 不是静态 snippet，而是“可以动态解析、根据你输入的内容产生输出”的表达式系统。

厂商前缀（Vendor prefixes）

CSS Abbreviations 章节单独列出了 Vendor prefixes 一节。它的作用是：当你写某个需要前缀的属性缩写时，Emmet 可以自动补出 -webkit-、-moz-、-ms-、-o- 等前缀版本，省去手写重复声明。

具体生成哪些前缀、按什么顺序排列，取决于 Emmet 的配置（snippets.json、preferences.json、syntaxProfiles.json 属于 Customization 部分）。文档没有在 CSS 缩写页给出固定的前缀清单，因此实际结果以你所用编辑器和配置为准。

渐变（Gradients）

Gradients 也是 CSS Abbreviations 下的独立小节。渐变值本身写法冗长，且历史上各浏览器前缀写法不同，Emmet 允许用缩写形式生成渐变声明，并通常与前缀功能配合使用。适合需要频繁写 linear-gradient、radial-gradient 一类值的场景。

模糊搜索（Fuzzy search）

Fuzzy search 解决的是“记不住缩写”的问题。你不需要精确写出完整缩写，输入大致片段即可匹配到候选缩写。它和前面三类功能的关系是：前三类负责“写出来”，模糊搜索负责“找得到”。

四类功能速览

功能 作用 典型场景
CSS 属性缩写 把缩写展开为属性声明 日常写 margin、padding、display 等
Vendor prefixes 自动补浏览器前缀 需要兼容多浏览器的属性
Gradients 缩写生成渐变值 linear-gradient 等复杂值
Fuzzy search 按片段模糊匹配缩写 记不清缩写写法时

怎么验证和使用

  1. 在支持 Emmet 的编辑器里新建或打开一个 CSS/LESS/SCSS 文件。
  2. 输入一个 CSS 缩写，例如 m10。
  3. 执行 “Expand Abbreviation” 动作（文档演示中对应 Tab 键），预期结果是该缩写被展开为完整的 CSS 声明。
  4. 想确认前缀和渐变的具体输出，直接对相应缩写执行展开，观察生成结果；若与预期不符，检查 Customization 下的配置文件。

常见卡点有两个：一是展开动作的快捷键在不同编辑器里可能不同，文档演示用的是 Tab，但要以你编辑器的绑定为准；二是前缀和渐变的输出受配置影响，文档没有给出统一固定值，遇到差异应查配置文件而不是假定文档写死了结果。

Emmet 官方还提供 Cheat Sheet 页面，可用于快速查缩写；同站另有 Emmet LiveStyle（CSS/LESS/SCSS 实时双向编辑）和 Emmet Re:view（并排测试响应式设计）两个开发者工具。

docs.emmet.io