可以在css中定义常量吗?
我在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类最适用于对html文档结构进行分类。一个名为darkBackground的类没有描述文档的结构,并创建了文档的概念耦合到外观的某个方面 - 这正是CSS应该让我们远离的东西。如果将来的开发人员需要切换到浅色背景,他们可能需要编辑大量html以使用class“lightBackground”,或者通过编辑“darkBackground”规则来引用淡色,从而违反其类的含义。 – csj 2013-08-01 00:50:20
有一个这样的couple of proposals,所以它很快就会发生,但据我所知没有任何标准。
为此使用CSS类的问题是,如果您想为不同的属性使用相同的值,例如如果您想要在一个元素上使用特定的颜色值作为边框,背景颜色在另一个。
执行此操作的标准方法是PHP。添加#define语句在你的CSS文件的开头,就像
#define COLORNAME: #123456;
而是在HTML文件的头部链接到CSS文件,运行在该位置的PHP脚本。该脚本加载CSS文件,将所有出现的COLORNAME
替换为#123456
,并使用echo
或print
将修补后的文本流式传输到客户端。
或者,您可以上传源文件(也使用PHP),使用PHP创建一个CSS文件,其中所有出现的#define都将被替换,并在HTML中使用该文件。这样做效率更高,因为您只需在上传时进行一次转换,而不是每次加载HTML文件。
你可以有常量在CSS
文件,宣布他们是这样的:
*{
-my-lightBlue: #99ccff;
-my-lightGray: #e6e6e6;
}
然后你可以在CSS文件中像这样使用它们:
.menu-item:focused {
-fx-background-color: -my-lightBlue;
}
之后,你可以使用它们这样编程:
progressBar.setStyle("-fx-accent: -my-lightBlue;");
在CSS中,你可以声明你的常量在:root bloc:
:root {
--main-bg-color: #1596a7;
}
,并用VAR()方法的使用:
.panel-header {
background: var(--main-bg-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;
}
这将引用每个元素的颜色属性,并将其设置为(在此示例中)#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()
方法之间有差距。
*与lessCSS它@color
,与上海社会科学院是$color
如果您使用诸如SASS框架,你将与其他辉煌功能相处此功能。 – Coderchu 2015-07-14 04:56:26
是的,他们现在被称为[CSS自定义属性](https://mobile.htmlgoodies.com/html5/css/a-guide-to-using-css-variables.html) – gbjbaanb 2017-12-10 04:35:41