我在CSS样式表中使用了几种颜色。例如

#testdiv{
  background: #123456;
}

是否可以通过名称定义该颜色，以便我可以像这样在css表中引用它

#testdiv{
  background: COLORNAME;
}

最好定义一个CSS类，然后在要为其分配颜色的每个元素上重用它，而不是将其编码为特定元素。

像这样：

.darkBackground {
   background: #123456;
}

.smallText {
   font-size:8pt;
}

知道一个元素可以应用多个类也很有帮助，因此您可以将“常量”元素值分解为单独的类，并根据需要应用多个。

<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>

不是使用普通CSS，而是可以使用一些CSS扩展，例如SASS或less-css。

这是一个较少CSS的示例：

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

是的，使用类是一种很好的方法，但是现在可以在CSS中声明变量。当声明相同的颜色时，变量（尤其是颜色变量）非常有用（在需要十六进制值的位置，如果您使用的是集成颜色，则实际上并没有太大关系）。

这是使用纯CSS（和tbh，不及使用SASS或lessCSS一样优雅），但它可以用于纯CSS。首先，在:root块中定义实际变量。您也可以在一个p块中定义它（或其他任何与此相关的东西），但仅在该块中可用。因此，为确保它可全局访问，请将其放在根块中：

:root {
  --custom-color: #f0f0f0;
}

并且使用该var方法（没有var方法，它不会被解析为实际引用），然后可以在以后引用它：

p{
    color: var(--custom-color);
}

由于该:root块（像所有其他CSS声明一样）是引用元素的功能齐全的块，因此您不能声明以下内容：

:root{
    color: #00ff00;
}

这将引用每个元素的color属性并将其设置为（在此示例中）#00ff00。您声明的每个变量名都必须以开头--，这意味着您可以执行以下操作：

:root{
    --color: #00ff00;
}

再一次，如果可以的话，使用SASS或lessCSS之类的东西。通过编写@color = #fff*并使用@color*进行引用来声明它们的能力比处理普通CSS以及var每次要访问自定义属性时都必须使用关键字要容易得多。

而且，您可以使用JS访问内联CSS以获取和/或更改属性：

//Inline CSS
element.style.getPropertyValue("--custom-color");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--custom-color");

// set variable on inline style
element.style.setProperty("--custom-color", "#f0f0f0");

注意！

这是最近添加的功能，因此检查浏览器的兼容性很重要。尤其值得关注的是firefox，因为它在变量声明本身和var()方法的引入之间存在差距。caniuse当前估计有91.65％的用户运行支持该方法的浏览器。而且还值得注意的是IE根本没有。

_{*用lessCSS表示@color，用SASS表示$color}

有一些建议，因此可能很快就会发生，但是据我所知，还没有任何标准化。

为此使用CSS类的问题是，如果您想对不同的属性使用相同的值，例如对于一个元素上的边框使用特定的颜色值，而对于一个元素上的背景颜色使用特定的颜色值，则它们无济于事另一个。

在CSS中，您可以在：root bloc中声明常量：

:root {
  --main-bg-color: #1596a7;
}

并与var（）方法一起使用：

.panel-header {
    background: var(--main-bg-color);
    color: ....
}

使用SASS或更少。

如今，使用上述类似的预处理程序是一种更好的前端开发工作流程的常见做法。

它可以帮助您变得更有条理，变量或混合函数之类的功能是值得考虑的一些原因。

您可以使用Sass变量：

$color: #4D926F;

.someclass{
  color: $color;
}

您可以在CSS文件中包含常量，这样声明它们：

*{
 -my-lightBlue: #99ccff;
 -my-lightGray: #e6e6e6;
}

然后，您可以在CSS文件中使用它们，如下所示：

.menu-item:focused {
  -fx-background-color: -my-lightBlue;
}

之后，您可以像下面这样以编程方式使用它们：

progressBar.setStyle("-fx-accent: -my-lightBlue;");

标准的方法是PHP。在CSS文件的开头添加#define语句，例如

#define COLORNAME: #123456;

无需链接到HTML文件开头的CSS文件，而是在该位置运行PHP脚本。该脚本加载CSS文件，替换所有的COLORNAMEby，#123456并使用echo或将修补后的文本流式传输到客户端print。

或者，您可以上传源文件（也使用PHP），一旦所有出现#defines的地方都被替换，就可以使用PHP创建CSS文件，并在HTML中使用该文件。这样做效率更高，因为在上载时只执行一次转换，而不是每次加载HTML文件时都执行一次转换。