GutterColor 不显示颜色块主因是语法未设为 CSS 或颜色格式不匹配；需确认语法为 source.css、启用插件、使用支持的颜色格式（十六进制/RGB/A/色名）；自定义变量需正则扩展且不支持跳转。
为什么 GutterColor 插件在 Sublime Text 中不显示颜色块？
多数人装完 GutterColor 后发现编辑器左侧 gutter（行号旁空白区）没出现小色块，第一反应是插件没生效。实际原因通常是：CSS 文件未被正确识别为 source.css 语法，或颜色写法不符合插件默认匹配规则。
- 检查右下角语法标识是否为
CSS（不是Plain Text或SCSS）；若不是，点击切换 →Open all with current extension as… → CSS -
GutterColor默认只识别十六进制（如#ff0033）、RGB/A（如rgb(255, 0, 51)、rgba(255,0,33,0.8)）、预定义色名（如red、transparent），但不识别 HSL、hsl()、自定义变量（如var(--primary)） - 确保已启用实时扫描：菜单栏
Preferences → Package Settings → GutterColor → Settings，确认"enable": true且"scan_on_open": true
如何让 GutterColor 支持 CSS 自定义属性（CSS 变量）？
原生 GutterColor 不解析 var(--color-name)，但可通过正则扩展支持——前提是变量值本身是有效颜色格式，且你在 CSS 中已定义它（比如 :root { --primary: #007acc; }）。
- 打开
Preferences → Package Settings → GutterColor → Settings – User - 添加自定义匹配规则，例如：
{
"gutter_color": [
{
"name": "css-var-color",
"scope": "support.type.property-name.css",
"regex": "--[^:;]+:\\s*(#[0-9a-fA-F]{3,8}|rgb\\([^)]+\\)|rgba\\([^)]+\\)|hsl\\([^)]+\\)|hsla\\([^)]+\\)|[a-zA-Z]+)"
}
]
}
⚠️ 注意：这仅高亮变量声明行，**不跳转到变量定义处**；跳转仍需手动搜索 --primary 或使用 Ctrl+Click（需配合 SublimeCodeIntel 或 EasyClangComplete 类补全插件）。
点击颜色块后跳转不到对应颜色定义，怎么办？
GutterColor 本身只做「可视化」，**不提供跳转能力**。所谓“跳转到颜色定义”，其实是误传——它只是在 gutter 显示色块，点击后默认无响应。真正能跳转的，是 Sublime 原生的符号跳转（Ctrl+Click）或第三方插件（如 Color Highlighter + Symbol Finder 组合）。
立即学习“前端免费学习笔记（深入）”；
- 若想点击色块跳转到该颜色首次出现位置（比如
#333在:root中定义），需额外安装Color Highlighter并配置其color_map和jump_to_definition - 更轻量的做法：用
Ctrl+Shift+F全局搜索颜色值（如#333333），勾选Whole Word和Case Sensitive提高准度 - 如果颜色来自外部 CSS（如 Bootstrap），跳转不可行，只能靠文档或 DevTools 反查
替代方案：不用插件也能快速定位颜色来源？
当插件不稳定或团队禁用时，纯 Sublime 内置功能足够应对多数场景：
- 选中颜色值（如
rgba(0, 122, 204, 0.9)），按Ctrl+D多次可逐个选中同值所有出现位置，快速扫视上下文 - 用
Ctrl+P输入@调出符号列表，虽然不直接索引颜色，但能跳到:root、.theme-dark等常见颜色容器选择器 - 对 Sass/SCSS 文件，
Ctrl+Click可直接跳转到变量定义（依赖SublimeLinter-scss-lint或SCSS语法包）
颜色跳转这件事，本质是“定位语义归属”，而不是“识别字符串”。真正卡住的往往不是工具，而是 CSS 中颜色分散在变量、类名、内联样式、JS 拼接多个位置——这时候再好的 gutter 插件也得靠人工串联上下文。
