在 CSS 中设置颜色“变量”

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适用于您旅程各个阶段的云产品。立即开始使用 200 美元的免费积分!

我说“变量”,因为 CSS 本身不支持真正的变量。关于它是否应该支持的争论相当激烈。我不会对此发表立场,但有一个巧妙的小技巧在如何通过一个额外的步骤来实现几乎相同的效果方面广为流传。至少对于颜色来说是这样。它就像在你的 CSS 中包含一个注释部分一样简单,如下所示

/* 
   Light Blue: #afd2f0
   Dark Blue: #0f4574
   Bright Red: #fa0606

   Link Color: #3674bb
   Post Background Color: #fffbd8
   Post Title Color: #9a8f2e
*/

在你的整个 CSS 中,你将使用这些十六进制值来表示相应的对象。然后,假设你想改变你用于链接颜色的颜色,只需在任何文本编辑器中对该十六进制代码进行全部查找/替换。

findreplacetextmate.png

比变量所能实现的额外步骤少了一步,但这绝对比寻找确切的位置来更改颜色要好。