有没有可能在CSS中定义常量?

我在我的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 。

下面是一个较less的CSS的例子:

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

有几个build议 ,所以很快就会发生,但据我所知还没有什么标准。

使用CSS类的问题是,如果你想为不同的属性使用相同的值,例如,如果你想在一个元素上使用特定的颜色值作为边框,并且背景色为on另一个。

使用SASS或更less 。

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

它可以帮助你更有组织,像variables或混合function是他们值得考虑的一些原因。

你可以在CSS文件中有常量,声明如下:

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

然后你可以像这样在CSS文件中使用它们:

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

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

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

build议是一个有趣的阅读 – 谢谢。

我会补充说,常量已经在CSS中提供 – 一些颜色已经定义,所以有先例 – OP想要更丰富的调色板,这似乎是合理的。

颜色(预先定义的集合的扩展)对于常量似乎是一个很好的参数,改变一整套类的颜色可能是很多工作。 改变已经分配给一组类的颜色的常量显然是较less的工作,更高效且不易出错。 一般情况下,软件在没有常量/定义/macros的情况下将在哪里保证一致性?

如果SASS或更less提供常量,那么它就是一个给CSS标准人员的消息 – 当第二层工具(SASS)开始在第一层(CSS)之上添加零件时,整个事情就会失控。 networking技术的发展历史屡见不鲜,这一概念背后出现了一层一层的根本性缺失,最终导致一层一层的落实,最终给每个人带来了更多的工作和麻烦。 我想第二层是一个沙坑,可以testing新的想法和需求。

在CSS中,你可以声明你的常量在:root bloc:

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

并使用var()方法:

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

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

#define COLORNAME: #123456;

不要链接到HTML文件头部的CSS文件,而是在该位置运行PHP脚本。 该脚本加载CSS文件,用#123456replaceCOLORNAME的所有匹配COLORNAME ,并使用echoprint将补丁文本stream式传输到客户端。

或者,您可以上传源文件(也可以使用PHP),使用PHP创build一个CSS文件,其中所有出现的#define被replace,并在HTML中使用该文件。 这样做效率更高,因为您只需在上传时进行一次转换,而不是每次加载HTML文件。