如何在VSCode/VSCodium中显示CSS自定义属性的颜色预览

针对你通过calc()结合CSS变量生成颜色的场景，以下是几个可行的方案，能让VSCodium像识别原生颜色值一样显示颜色预览：

1. 配置「Color Highlight」扩展识别动态HSL值 #

你之前试过类似扩展，但Color Highlight支持自定义正则匹配规则，能覆盖你的动态颜色定义：

1. 打开设置（快捷键Ctrl+,），搜索color-highlight.matches
2. 添加如下配置项：

{
  "color-highlight.matches": [
    {
      "name": "Dynamic HSL Variables",
      "match": "--[\\w-]+:\\s*hsl\\(([\\s\\S]+?)\\);",
      "extract": "hsl($1)"
    }
  ]
}

这个正则会匹配所有以--开头、值为hsl()格式的自定义属性，即使里面包含换行和calc()计算，也能提取完整的颜色表达式生成预览。

2. 手动添加静态预览注释 #

如果扩展配置仍有局限，可以在变量定义后添加注释，写入计算后的静态颜色值，编辑器会自动识别注释里的颜色：

:root {
    --hue--1: 45;
    --color--saturation: 1%;
    --color--lightness: 1%;
    --color--opacity: 1;
    
    --color--dark: hsl(var(--hue--1)
    calc(22 * var(--color--saturation))
    calc(33 * var(--color--lightness))
    calc(1 * var(--color--opacity))
    ); /* hsl(45, 22%, 33%) */
    --c1: var(--color--dark);
}

这种方法稳定可靠，适合颜色变体不频繁修改的场景。

3. 启用编辑器实验性CSS变量支持 #

打开设置，搜索css.experimental.customProperties并勾选启用。该功能会尝试解析CSS变量的计算结果，对于你这种简单乘法计算的场景，大概率能正确生成颜色预览。注意要使用最新版本的VSCodium，旧版本对该特性的支持不完善。

内容的提问来源于stack exchange，提问作者spinhead