sublime text需安装colorhighlighter插件并重启才能显示css颜色预览，仅支持标准颜色格式（如#fff、rgb()、red等），不支持变量、函数或缩写，且须确保语法模式为css/scss并正确配置preview_size等参数。
Sublime Text 里 CSS 颜色代码不显示预览？先确认插件没装错
Sublime Text 默认不支持颜色预览，必须靠插件实现。最常用、维护最勤的是 ColorHighlighter（注意不是 Color Highlighter 或旧版 ColorPicker）。装错名字或版本会导致预览完全不生效。
- 插件安装必须通过 Package Control：按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS），输入Install Package，再搜ColorHighlighter（结尾无空格，无下划线） - 装完别急着写 CSS，先重启 Sublime —— 很多用户跳过这步，结果以为插件失效
- 确保当前文件语法是
CSS或SCSS：右下角状态栏点开语法名，选CSS；如果是Plain Text，颜色代码压根不会被识别
颜色预览不出现？检查 CSS 写法是否符合插件识别规则
ColorHighlighter 只识别标准 CSS 颜色值格式，对缩写、变量、函数调用等默认不处理。
- 支持的写法包括：
#fff、#ffffff、rgb(255, 0, 0)、rgba(0, 0, 0, 0.5)、hsl(120, 100%, 50%)、red（基础色名） - 不支持的写法：
var(--primary)、color-mix(in srgb, red 50%, blue)、hwb(0 0% 0%)（新版 CSS 函数）、transparent（部分版本不渲染） - 如果你在
.vue或.html文件里写内联style，需确保语法模式设为CSS而非HTML，否则插件不触发
预览颜色块太小/位置偏移/闪退？调整插件配置项
默认配置在高 DPI 屏幕或某些字体下容易错位，需手动微调。
- 打开配置：菜单
Preferences → Package Settings → ColorHighlighter → Settings - 关键参数：
-
"preview_size"：默认16，可改到20或24让色块更明显 -
"preview_offset"：默认0，若色块盖住文字，尝试设为-2或2 -
"enable_on_languages"：确认列表里包含"css"、"scss"、"sass"，漏掉就无效
-
- 修改后保存配置文件，无需重启，但已打开的 CSS 文件需手动重载（右键 →
Revert File或关闭再打开）
为什么 SCSS 里 $color: #ff0 没预览？变量赋值本身不触发渲染
插件只对“最终用于样式的颜色值”做高亮，变量声明、函数参数、注释里的颜色代码一律忽略。
立即学习“前端免费学习笔记（深入）”；
-
$accent: #007acc;—— 这行不会预览（只是定义） -
border: 2px solid $accent;—— 这行也不会预览（变量未展开） - 只有编译后实际生效的样式值才可能被识别，比如你用
PostCSS或Live Sass Compiler实时生成 CSS 文件，那输出的.css文件里才有预览
真正想看变量效果，得靠构建流程输出真实 CSS，或者换用支持变量预览的编辑器（如 VS Code + CSS Peek），Sublime 的插件能力到此为止。
颜色预览本质是文本匹配 + 小方块绘制，它不解析 CSS 语义，也不理解作用域和变量作用链。越靠近原始语法、越少抽象层的地方，它越可靠。
