有没有可能在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文件,用#123456
replaceCOLORNAME
的所有匹配COLORNAME
,并使用echo
或print
将补丁文本stream式传输到客户端。
或者,您可以上传源文件(也可以使用PHP),使用PHP创build一个CSS文件,其中所有出现的#define被replace,并在HTML中使用该文件。 这样做效率更高,因为您只需在上传时进行一次转换,而不是每次加载HTML文件。