sublime怎么安装Emmet自定义语法_sublime快速编写CSS秘籍【教程】

CSS 缩写不生效？检查语法模式和触发设置

Emmet 对 CSS 的支持默认只在 CSS 语法模式下激活，且需满足两个条件：

• 当前文件右下角状态栏显示的是 CSS（不是 Plain text 或 SCSS）；如果不是，点击它 → Set Syntax → CSS
• Tab 键必须在行末、冒号后或空格后触发，例如：mt10 后面跟空格或直接按 Tab，才会展开；写成 mt10px 则不识别
• 确认 Preferences → Package Settings → Emmet → Settings 中没有禁用 css 语法支持

常见失败现象：df 按 Tab 没反应 → 实际上 Emmet 默认不把 df 当 display: flex，这是自定义范畴。

给 CSS 添加自定义缩写（如 df → display: flex）

Emmet 的 CSS 缩写规则存在两层：内置规则（不可改） + 用户自定义规则（可扩展）。要加 df、jcse 这类简写，必须编辑用户配置：

• 菜单栏打开 Preferences → Package Settings → Emmet → Settings – User
• 填入如下结构（注意逗号和括号闭合）：

{
    "preferences": {
        "css.snippets": {
            "df": "display: flex;",
            "jcc": "justify-content: center;",
            "aic": "align-items: center;",
            "mt@": "margin-top: ${1:0}px;"
        }
    }
}

保存后无需重启，新缩写立即可用。注意：${1:0} 表示光标停在 0 处可编辑，@ 是 Emmet 的“参数占位符”语法，不是所有字符都支持，仅限数字单位类属性（如 mt@、pl@）。

为什么有些缩写在 .scss/.less 文件里不工作？

Emmet 默认只绑定 CSS 语法模式，SCSS 和 Less 是独立语法包，需要显式启用：

• 打开 Preferences → Package Settings → Emmet → Key Bindings – User
• 添加以下键位映射（让 Tab 在 SCSS 文件中也触发 Emmet）：

[
    {
        "keys": ["tab"],
        "command": "emmet_expand_abbreviation",
        "context": [
            {
                "operand": "source.css.scss",
                "operator": "equal",
                "match_all": true,
                "key": "selector"
            }
        ]
    }
]

其中 source.css.scss 是 SCSS 的语法作用域名，可通过 Ctrl+Shift+P → Show Scope Name 查看当前文件真实 scope。Less 同理，换成 source.css.less 即可。

自定义缩写和语法绑定这两步漏掉任意一个，CSS 快速编写就只剩一半效率。很多人卡在“装了 Emmet 却写不出 df”，其实问题不在插件，而在没配 CSS snippet 或没切对语法模式。