在CSS中定义颜色作为变量 [英] define colors as variables in CSS

问题描述

我正在使用一个相当长的CSS文件。我知道客户端可以要求更改颜色方案，并且想知道：是否可以为变量分配颜色，以便我可以只更改一个变量以将新颜色应用于所有使用它的元素？

请注意，我无法使用PHP动态更改CSS文件。

解决方案

可以在CSS

可以找到css变量文档的链接：此处。

示例CSS文件

 ：root {
 --main-color：＃06c; 
} 
 #foo {
 color：var（ -  main-color）; 
} 
  

有关工作示例，请参阅这个小提琴（这个例子显示了一个css选择器在颜色硬编码为蓝色，另一个css选择器使用css变量，原始和当前语法，将颜色设置为蓝色）：

支持

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables\"> Firefox 31+ ， Chrome 49+ ， Safara 9.1+ 和 Opera 36+ 附带对css变量的原生支持。

在最近的编辑时：正在使用CSS变量留下Microsoft Edge 积压。

现在大多数现代浏览器在其各自的稳定版本中支持规范;从这一点开始，请随时查看 canIuse.com的css变量支持。

I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just change a variable to have the new color applied to all elements that use it?

Please note that I can’t use PHP to dynamically change the CSS file.

解决方案

It is possible in CSS

The link for css-variable documentation can be found: here.

Example CSS file

:root{
    --main-color:#06c;
}
#foo{
    color: var(--main-color);
}

For a working example please see this fiddle (the example shows one of the css selectors in the fiddle has the color hard coded to blue, the other css selector uses css-variables, both original and current syntax, to set the color to blue):

Support

Firefox 31+, Chrome 49+, Safara 9.1+ and Opera 36+ ships with native support for css variables.

At the time of the most recent edit: Leaving Microsoft Edge with CSS variables officially "on the backlog" for development.

Now that the majority of modern browsers support the spec in their respective stable releases; from this point onward please feel free to check canIuse.com for css variable support.

这篇关于在CSS中定义颜色作为变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！