需安装emmet和css3(austinhappel版)插件,并启用experimental属性、确保文件语法为css3且后缀正确。

Sublime Text 3 安装 CSS3 语法支持和自动补全插件
Sublime Text 默认不带完整的 CSS3 属性提示,所谓“CSS3 插件”其实不是单个插件,而是靠 Emmet + CSS3 语法包 + 正确的文件关联共同生效。直接搜“CSS3 插件”容易装错或白忙活。
用 Package Control 装对两个关键包
别手动下载 zip 或 git clone,90% 的失效问题出在装了非维护分支或过时包。必须通过官方渠道装这两个:
-
Emmet:提供flex、transform等缩写展开,比如输d:f回车变display: flex; -
CSS3(作者:austinhappel):替换默认的 CSS 语法高亮和补全,支持gap、aspect-ratio、@layer等新属性/规则
操作步骤:Ctrl+Shift+P → 输入 Package Control: Install Package → 分别搜 Emmet 和 CSS3 并安装。装完不用重启,但需确保当前文件是 .css 后缀且右下角语法显示为 CSS3(不是 CSS)。
为什么写了 backdrop-filter 还没提示?
不是插件没装好,是 Sublime 默认只对“已知安全属性”做补全。CSS3 包虽支持新属性,但部分实验性属性(如 backdrop-filter、scroll-behavior)需手动启用:
- 打开
Preferences → Package Settings → CSS3 → Settings - 在用户设置里加一行:
"enable_experimental": true - 保存后,
backdrop-开头的属性才会出现在补全列表中
注意:开启后补全项变多,输入 pos: 可能跳出 position: sticky,但也可能混入未广泛支持的值(如 relative 下的 inset),得自己判断兼容性。
文件没识别成 CSS3 语法?检查三处硬编码点
即使插件装了,如果右下角显示 CSS 而非 CSS3,补全就还是老的。常见卡点:
- 新建文件默认是
Plain Text,必须手动点右下角 → 选CSS3;或者保存为.css后缀再打开 - 已有
.css文件仍显示CSS:可能是被其他插件劫持了语法关联,执行View → Syntax → Open all with current extension as… → CSS3 - 项目里用
.module.css或.pcss?这些后缀不会自动绑定 CSS3,需在Preferences → Settings – Syntax Specific里加:"syntax": "Packages/CSS3/CSS3.sublime-syntax"
路径大小写敏感,Packages/CSS3/CSS3.sublime-syntax 少一个 3 或大小写错都会失效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











