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

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;
}

这将引用每个元素的颜色属性并将其设置为(在此示例中)#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()方法之间存在差距.

_{*少用CSS @color,用SASS就可以了$color}

Answer 3

有几个建议,所以它可能会很快发生,但据我所知,还没有标准化.

使用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: ....
}