注意！

Question

我在CSS样式表中使用了一些颜色。例如

#testdiv{
  background: #123456;
}

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

#testdiv{
  background: COLORNAME;
}

Answer 1

不使用纯CSS，但您可以使用一些CSS扩展程序，例如SASS或less-css。

以下是较少css的示例：

@color: #4D926F;

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

Answer 2

是的，使用类是一种很好的方法，但现在可以在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");

注意！

这是最近添加的功能，因此browser compatibility is important to check。特别是firefox值得特别注意，因为它在引入变量声明本身和var()方法之间存在差距。 caniuse目前估计有91.39％的用户运行支持该方法的浏览器。并且值得注意的是IE根本没有。

_{* withCSS为@color，SASS为$color}

Answer 3

这有一个couple of proposals，所以很快就会发生，但据我所知，还没有标准化。

使用CSS类的问题在于，如果要对不同的属性使用相同的值，它们没有帮助，例如，如果要对一个元素的边框使用特定颜色值，以及背景 - 另一个颜色。

Answer 4

定义一个CSS类并在要分配颜色的每个元素上重复使用它而不是将其编码为特定元素可能是一种更好的做法。

像这样：

.darkBackground {
   background: #123456;
}

.smallText {
   font-size:8pt;
}

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

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

Answer 5

在CSS中，您可以在：root bloc：

中声明常量

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

并使用var（）方法：

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

Answer 6

使用SASS或less。

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

它可以帮助你更有条理，变量或混合等功能是他们值得考虑的一些原因。

Answer 7

您可以使用Sass变量：

$color: #4D926F;

.someclass{
  color: $color;
}

Answer 8

您可以在CSS文件中包含常量，并将其声明为：

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

然后你可以在CSS文件中使用它们：

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

之后你可以像这样以编程方式使用它们：

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

Answer 9

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

#define COLORNAME: #123456;

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

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

是否可以在css中定义常量？

9 个答案:

注意！