是否可以在 css 中定义常量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4847850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to define constants in css?
提问by zmol
I use a few colors throughout my CSS stylesheet. For example
我在整个 CSS 样式表中使用了几种颜色。例如
#testdiv{
background: #123456;
}
Is it possible to define that color by name so I can reference it in the css sheet like this
是否可以按名称定义该颜色，以便我可以在这样的 css 表中引用它
#testdiv{
background: COLORNAME;
}
采纳答案by JohnFx
It is probably a better practice to define a CSS class and re-use it on each element you want to assign the color to rather than coding it to a specific element.
定义一个 CSS 类并在要为其分配颜色的每个元素上重新使用它可能是更好的做法，而不是将其编码到特定元素。
Like so:
像这样：
.darkBackground {
background: #123456;
}
.smallText {
font-size:8pt;
}
It also helps to know that an element can have multiple classes applied so you can break out your "Constant" element values into separate classes and apply more than one as needed.
了解一个元素可以应用多个类也很有帮助，因此您可以将“常量”元素值分解为单独的类，并根据需要应用多个类。
<div id="myDiv1" class="darkBackground smallText"></div>
<div id="myDiv2" class="darkBackground bigText"></div>
回答by probabilityzero
回答by Zoe
Yes, using classes is a good approach, but it is now possible to declare variables in CSS. And variables (especially color ones) are incredibly useful when you declare the same color (one where you need the hex value, if you use an integrated color it doesn't really matter as much).
是的，使用类是一种很好的方法，但现在可以在 CSS 中声明变量。当您声明相同的颜色时，变量（尤其是颜色的）非常有用（需要十六进制值的地方，如果您使用集成颜色，则它并不重要）。
And this is using plain CSS (and tbh, not nearly as elegant as using SASS or lessCSS) but it works for purposes of plain CSS. First off, define the actual variable in the :rootblock. You can define it in e.g. a pblock as well (or anything else for that matter) but it'll only be available in that block. So to make sure it's globally accessible, put it in the root block:
这是使用纯 CSS（和 tbh，不像使用 SASS 或 lessCSS 那样优雅），但它适用于纯 CSS。首先，在:root块中定义实际变量。您也可以在例如一个p块中定义它（或其他任何与此相关的东西），但它只能在该块中可用。所以为了确保它是全局可访问的，把它放在根块中：
:root {
--custom-color: #f0f0f0;
}
And using the varmethod (without the var method it won't be resolved as an actual reference) you can then reference it later:
并使用该var方法（没有 var 方法，它不会被解析为实际引用），然后您可以稍后引用它：
p{
color: var(--custom-color);
}
Since the :rootblock is (like all other CSS declarations) a fully functioning block that references elements, you can't declare something like:
由于:root块（与所有其他 CSS 声明一样）是一个引用元素的功能齐全的块，因此您不能声明如下内容：
:root{
color: #00ff00;
}
That would reference the color attribute of every single element and set it to (in this example) #00ff00. Every variable name you declare has to start with --, meaning you can do:
这将引用每个元素的 color 属性并将其设置为 (在本例中) #00ff00。您声明的每个变量名称都必须以 开头--，这意味着您可以执行以下操作：
:root{
--color: #00ff00;
}
And again, if you can, use something like SASS or lessCSS. The ability to declare them by writing @color = #fff* and referencing with @color* is much easier than dealing with plain CSS and having to use the varkeyword every time you want to access a custom property.
再说一次，如果可以的话，使用类似 SASS 或 lessCSS 的东西。通过编写@color = #fff* 并使用@color*引用来声明它们的能力比处理普通 CSS 以及var每次要访问自定义属性时都必须使用关键字容易得多。
And you can access inline CSS with JS to get and/or alter the properties:
您可以使用 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");
NOTE!
笔记！
This is a recently added feature, so browser compatibility is important to check. Especially firefox is worth paying extra attention to, as it has a gap between the introduction of the variable declarations themselves and the var()method. caniusecurrently estimates 91.65% of users run a browser with support for the method. And it's also worth noting IE doesn't at all.
这是最近添加的功能，因此检查浏览器兼容性很重要。尤其是 firefox 值得特别关注，因为它在引入变量声明本身和var()方法之间存在差距。caniuse目前估计 91.65% 的用户运行支持该方法的浏览器。还值得注意的是 IE 根本没有。
* with lessCSS it's @color, with SASS it is $color
* 使用 lessCSS 时@color，使用 SASS 时$color
回答by codebox
There are a couple of proposalsfor this, so it might happen soon, but nothing has yet been standardised as far as I know.
对此有几个提议，所以它可能很快就会发生，但据我所知，还没有标准化。
The problem with using CSS classes for this is that they are no help if you want to use the same value for different properties, for example if you want to use a particular color value for a border on one element, and a background-color on another.
为此使用 CSS 类的问题是，如果您想对不同的属性使用相同的值，它们将无济于事，例如，如果您想对一个元素的边框使用特定的颜色值，而对某个元素使用背景颜色其他。
回答by A. Hafid
In CSS, you can declare your constant in :root bloc :
在 CSS 中，您可以在 :root bloc 中声明您的常量：
:root {
--main-bg-color: #1596a7;
}
and using with var() method :
并使用 var() 方法：
.panel-header {
background: var(--main-bg-color);
color: ....
}
回答by Red
Nowadays, using preprocessors like the above is a common practice for a better front-end development workflow.
如今，使用上述预处理器是更好的前端开发工作流程的常见做法。
It helps you being more organized and features like variables or mixins are some of the reasons they worth taking into consideration.
它可以帮助您更有条理，变量或混合等功能是它们值得考虑的一些原因。
回答by JohnBeGood
You can have constants in a CSSfile, declaring them like this:
你可以在一个CSS文件中有常量，像这样声明它们：
*{
-my-lightBlue: #99ccff;
-my-lightGray: #e6e6e6;
}
Then you can use them in the CSS file like this:
然后你可以像这样在 CSS 文件中使用它们：
.menu-item:focused {
-fx-background-color: -my-lightBlue;
}
After that you can use them programmatically like this:
之后，您可以像这样以编程方式使用它们：
progressBar.setStyle("-fx-accent: -my-lightBlue;");
回答by Geert Goeteyn
The standard way to do this is PHP. Add #define statements at the beginning of your CSS file, like
执行此操作的标准方法是 PHP。在 CSS 文件的开头添加 #define 语句，例如
#define COLORNAME: #123456;
#define COLORNAME: #123456;
Instead of linking to the CSS file in the head of your HTML file, run a PHP script at that location. The script loads the CSS file, replaces all occurrences of COLORNAMEby #123456and streams the patched text to the client using echoor print.
不要链接到 HTML 文件头部的 CSS 文件，而是在该位置运行 PHP 脚本。该脚本加载 CSS 文件，替换所有出现的COLORNAMEby#123456并使用echoor将修补后的文本流式传输到客户端print。
Alternatively, you could upload the source file (also using PHP), use PHP to create a CSS file once where all occurrences of #defines are replaced, and use that file in your HTML. This is more efficient, since you're doing the conversion only once, at the upload, instead of every time you load the HTML file.
或者，您可以上传源文件（也使用 PHP），使用 PHP 创建一个 CSS 文件，其中所有出现的 #defines 被替换，然后在 HTML 中使用该文件。这更有效，因为您只在上传时进行一次转换，而不是每次加载 HTML 文件时。
