在写入 CSS 时复制 VScode 中的颜色框

Question

我目前正在从事一个主要显示地图的项目。下图的地图具有不同的颜色渐变，当您在 css 中设置颜色时，我想复制 vscode 的效果，它会显示一个显示颜色的小框。我会显示该颜色并在其旁边写下评论。（I.E 绿色 = 经济状况良好，浅绿色 = 经济状况中等，非常浅的绿色 = 经济状况不佳）。

当您在 css 中设置颜色属性时，我真的很想复制您在 vscode 中看到的颜色显示，如下所示：

Answer 1

我想你问的是在 CSS 中设置自定义 properties/variables?


    :root {
      --some-yellow-you-name-here: #ffff00;
    }


    .you-class-name {
      background-color: var(--some-yellow-you-name-here);
    }

Answer 2

在 vs 代码中打开设置（在 Mac 上，按 command+逗号）

搜索 Color Decorators 并勾选

Replicating color box in VScode when writing CSS