pigments 不显示颜色块是因为只识别标准颜色写法且依赖正确语法作用域；不支持css变量、自定义函数等，需检查文件类型、语法包、作用域配置及插件启用状态。
为什么 pigments 不显示颜色块？
不是所有 CSS 颜色写法都能被识别——pigments 默认只解析标准颜色关键字（如 red、transparent）、十六进制（#fff、#ffffff、#f3a）、RGB/RGBA（rgb(255,0,0)、rgba(0,0,0,0.5)）和 HSL/HSLA（hsl(0,100%,50%)）。它不支持 CSS 变量（var(--primary)）、自定义函数（color-mod()）或未加引号的字符串拼接（如 "#"+color）。
常见错误现象：
- CSS 中写了
background: #ff0000;却没高亮 → 检查是否在.css、.scss、.less等被 pigments 支持的语法作用域内（.html里style标签默认支持，但内联style=""属性不支持） - SCSS 文件中用了
$primary: #3498db;，但后续color: $primary;没渲染 → pigments 不解析变量引用，只渲染字面量值 - 安装后重启 Atom 仍无反应 → 确认插件已启用（Settings → Packages → 搜索
pigments→ 点击 Enable）
如何让 pigments 支持更多语法？
默认只开箱支持 CSS/SCSS/LESS/Less，但可通过配置扩展到其他文件类型（比如 Vue 单文件组件、Markdown 表格里的颜色代码、甚至 JS 字符串中的颜色值）。
实操建议：
- 打开 Settings → Packages → 找到
pigments→ 点击 Settings - 修改
Supported Grammars：添加source.css.vue（Vue SFC 的 style 块）、text.html.basic（HTML 中的<style></style>）、source.js（若需高亮 JS 里类似ctx.fillStyle = "#f00"这类赋值） - 注意：开启
source.js后，所有 JS 字符串都会被扫描，可能轻微拖慢大文件响应；建议搭配Ignore Scopes排除干扰，例如填入string.quoted.other（避免匹配注释里的假颜色）
pigments 和 highlight-selected 冲突怎么办？
两者都依赖光标位置做实时渲染，叠加使用时偶尔出现颜色块闪烁、选中文字变色异常、甚至 Atom 卡顿。这不是 bug，而是 Atom 渲染层对高频 DOM 更新的调度限制。
解决路径很直接：
- 优先保留
pigments，禁用highlight-selected的「Highlight on Right Click」选项（Settings → Packages →highlight-selected→ 取消勾选） - 或改用更轻量的替代方案：装
minimap-highlight-selected（仅在 minimap 小地图中标记，不影响主编辑区） - 如果必须同时高亮颜色+变量，建议把
pigments的Marker Type改为dot（Settings → Packages →pigments→Marker Type选dot），比outline或background性能更好
为什么 SCSS 里嵌套规则的颜色不显示？
比如这段代码：
.btn {
&--primary {
background: #007bff;
}
}中 #007bff 依然会高亮——pigments 解析的是 token 字面量，跟嵌套层级无关。真正影响识别的是语法 scope 是否正确。
容易被忽略的点：
- 确认你用的是官方
language-sass（而非旧版language-scss或第三方语法包），否则 SCSS 嵌套结构可能被解析为纯文本，导致 color token 丢失 - 检查文件后缀：SCSS 必须是
.scss，Sass（缩进语法）必须是.sass；混用后缀（如.css里写 SCSS 语法）会导致整个文件 fallback 到source.css，而该 scope 不支持嵌套解析 - 若用 VS Code 用户迁移过来，注意 Atom 没有“CSS-in-JS”原生支持，
styled-components或emotion字符串里的颜色需手动在Supported Grammars加source.js.jsx并配好Ignore Scopes
pigments 就看不见。
