用 Live Server 插件实现 CSS 实时预览：启动本地 HTTP 服务，保存即刷新浏览器；需 HTML 用相对路径引用 CSS，禁用浏览器缓存，避免 file:// 协议。
怎么让 Sublime Text 实时预览 CSS 修改效果
Sublime Text 本身不带浏览器预览功能，所谓“实时预览”得靠外部工具联动。最稳的路是用 Live Server 插件（通过 Package Control 安装），它会起一个本地 HTTP 服务，并在保存 .css 文件时自动刷新浏览器标签页。
- 必须确保 HTML 文件里引用的是相对路径的 CSS，比如
<link rel="stylesheet" href="style.css">，而不是file://协议直读 —— 否则 Live Server 刷新时样式不会更新 - 如果 CSS 是被 JS 动态插入或内联的，Live Server 刷新也无济于事，得配合浏览器开发者工具的
Ctrl+Shift+P→Disable cache手动绕过缓存 - 别用
Open in Browser类插件：它们用file://协议打开，CSS 修改后浏览器常因缓存或跨域拒绝重载
如何让 Sublime Text 正确高亮和补全 CSS 代码
默认安装的 Sublime Text 对 CSS 支持基础但不够智能，比如不识别自定义属性（--primary-color）、补全缺失单位、或对 @layer @container 等新语法报错。
- 装
CSS3插件（非官方原生 CSS 语法包）：它支持 CSS 自定义属性、级联层、容器查询等现代语法，且补全项更贴近真实开发场景 - 关掉默认的
CSS语法高亮（菜单 →View→Syntax→CSS），手动切换成CSS3；否则两种语法包冲突，会出现属性名不着色、伪类补全失效等问题 - 如果项目用 PostCSS 或 Tailwind，还得额外装
Tailwind CSS IntelliSense或PostCSS Language Support，否则@applytheme()这类写法直接变灰
保存时自动格式化 CSS 的坑在哪
很多人装了 JsPrettier 或 HTML-CSS-JS Prettify 后发现 CSS 越格式化越乱：缩进错位、分号消失、媒体查询嵌套崩塌 —— 根本原因是这些插件默认走 JavaScript 解析器处理 CSS，压根不认 CSS 语法规则。
- 唯一靠谱的选择是
Sublime-Stylefmt：它调用真实stylefmtCLI 工具（需提前npm install -g stylefmt），专为 CSS/SCSS 设计 - 配置时注意
stylefmt的版本兼容性：v6+默认启用postcss-custom-properties，如果你项目没用 CSS 变量，反而会把color: #fff错判成变量而报错 - 别勾选 “on save” 全局自动格式化：某些构建流程（如 Webpack Dev Server）自己监听文件变化并注入 CSS，Sublime 在保存瞬间格式化，可能触发两次热更新，导致样式闪动
为什么 CSS 文件里写 @import 总是标红报错
不是语法错，是 Sublime Text 的语法解析器把 @import 当成 CSS 规则开头（像 @media），但没正确识别后面跟的字符串或 URL，于是标红提示“expected RBRACE”。
立即学习“前端免费学习笔记（深入）”；
- 这是
CSS3插件已修复的问题，升级到 v3.4.0+ 就不再误报；旧版只能手动忽略：右键 →Set Syntax→Plain Text（临时规避，但失去所有高亮） - 真正要注意的是路径：Sublime 不解析
@import，所以@import "base.css";中的base.css路径是否正确，只有运行时浏览器才校验；编辑器标红 ≠ 代码错，但路径错 = 页面白屏 - 如果用 Sass/SCSS，必须切到
Sass或SCSS语法模式，原生 CSS 语法解析器根本不认识@use@forward
复杂点在于：CSS 新特性（比如 color-mix()、relative color syntax）的语法高亮和补全，目前没有任何 Sublime 插件完全覆盖，得靠眼睛盯住 Can I Use 数据，手动写，别信补全建议。
