js设置css自定义变量
This post was updated in August 2018.
这篇文章于2018年8月更新。
Preprocessors like Sass and Less certainly help to keep your CSS codebase organized and maintainable. Features like variables, mixins, loops, etc. — by adding dynamic capabilities to CSS coding — contribute to minimize repetition and speed up your development time.
Sass和Less这类预处理器肯定有助于保持CSS代码库的组织性和可维护性。 通过将动态功能添加到CSS编码中，诸如变量，混合，循环等功能，有助于最大程度地减少重复并缩短开发时间。
In recent years, a few dynamic features have started to make their appearance as part of the CSS language itself. CSS variables — or “custom properties”, as they’re officially called — are already here and have great browser support, while CSS mixins are currently in the works.
近年来，一些动态功能已经开始作为CSS语言本身的一部分出现。 CSS变量 (或正式称为“自定义属性”)已经存在，并且具有强大的浏览器支持，而CSS mixins当前正在开发中 。
In this article, you’ll find out how you can start integrating CSS variables into your CSS development workflow to make your stylesheets more maintainable and DRY (Don’t Repeat Yourself).
在本文中，您将发现如何开始将CSS变量集成到CSS开发工作流程中，以使样式表更易于维护和干燥 (不要重复自己)。
Let’s dive right in!
让我们潜入吧！
If you’ve used any programming language, you’re already familiar with the concept of a variable. Variables let you store and update values your program needs in order to work.
如果您使用过任何编程语言，那么您已经熟悉了variable的概念。 变量使您可以存储和更新程序正常运行所需的值。
For instance, consider the following JavaScript snippet:
例如，考虑以下JavaScript代码段：
let number1 = 2; let number2 = 3; let total = number1 + number2; console.log(total); // 5 number1 = 4; total = number1 + number2; console.log(total); // 7number1 and number2 are two variables which store the number 2 and 3 respectively.
number1和number2是两个分别存储数字2和3的变量。
total is also a variable which stores the sum of the number1 and number2 variables, in this case resulting in the value 5. You can dynamically change the value of these variables and use the updated value anywhere in your program. In the snippet above, I update the value of number1 to 4 and when I perform the addition again using the same variables, the result stored inside total is no longer 5 but 7.
total也是一个存储number1和number2变量之和的变量，在这种情况下，结果为5。您可以动态更改这些变量的值，并在程序中的任何位置使用更新后的值。 在上面的代码段中，我将number1的值更新为4，然后使用相同的变量再次执行加法运算时，存储在total内的结果不再是5，而是7。
The beauty of variables is that they let you store your value in one place and update it on the fly for a number of various purposes. No need for you to add new entities with different values all over your program: all value updates happen using the same storage place, i.e., your variable.
变量的优点在于，它们使您可以将值存储在一个地方，并出于多种目的即时更新它。 无需在整个程序中添加具有不同值的新实体： 所有值更新都使用相同的存储位置(即变量)进行 。
CSS is mostly a declarative language, lacking in dynamic capabilities. You’d say that having variables in CSS would almost be a contradiction in terms. If front-end development were just about semantics, it would be. Fortunately, the languages of the Web are very much like living languages, which evolve and adapt according to the surrounding environment and the needs of their practitioners. CSS is no exception.
CSS主要是一种声明性语言，缺乏动态功能。 您会说，就CSS而言，在变量中几乎是一个矛盾。 如果前端开发只是关于语义的，那将会是。 幸运的是，Web语言非常像实时语言，它们会根据周围环境和其从业人员的需求而发展和适应。 CSS也不例外。
In short, variables have now become an exciting reality in the world of CSS, and as you’ll soon see for yourself, this awesome new technology is pretty straightforward to learn and use.
简而言之，变量现在已经成为CSS世界中令人兴奋的现实，而且正如您很快就会发现的那样，这项很棒的新技术非常容易学习和使用。
The benefits of using variables in CSS are not that much different from those of using variables in programming languages.
在CSS中使用变量的好处与在编程语言中使用变量的好处没什么不同。
Here’s what the spec has to say about this:
规格说明如下：
[Using CSS variables] makes it easier to read large files, as seemingly-arbitrary values now have informative names, and makes editing such files much easier and less error-prone, as one only has to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.
[使用CSS变量]使得读取大文件变得更加容易，因为看似任意的值现在具有信息性的名称，并且使编辑此类文件变得更加容易且不易出错，因为只需在custom属性中更改一次该值即可，更改将自动传播到该变量的所有使用。
W3C Specification.
W3C规范 。
In other words:
换一种说法：
By naming your variables in ways that make sense to you in relation to your project, it’ll be easier for you to manage and maintain your code. For example, editing the primary color in your project will be much easier when what you need to change is one value for the --primary-color CSS custom property, rather than change that value inside multiple CSS properties in various places.
通过以对您的项目有意义的方式命名变量，可以更轻松地管理和维护代码。 例如，当您需要更改的是--primary-color CSS自定义属性的一个值，而不是在多个位置的多个CSS属性中更改该值时，在项目中编辑原色将更加容易。
One way you might have been taking advantage of the flexibility of variables when styling websites is by using preprocessors like Sass and Less.
在设计网站样式时，您可能一直利用变量的灵活性的一种方法是使用Sass和Less等预处理器。
Preprocessors let you set variables and use them in functions, loops, mathematical operations, etc. Does this mean CSS variables are irrelevant?
预处理器使您可以设置变量并将其用于函数，循环，数学运算等中。这是否意味着CSS变量无关紧要？
Not quite, mainly because CSS variables are something different from preprocessor variables.
不完全是，主要是因为CSS变量与预处理器变量有所不同。
The differences spring from the fact that CSS variables are live CSS properties running in the browser, while preprocessor variables get compiled into regular CSS code, therefore the browser knows nothing about them.
区别源于以下事实：CSS变量是在浏览器中运行的实时CSS属性，而预处理器变量被编译为常规CSS代码，因此浏览器对此一无所知。
What this means is that you can update CSS variables in a stylesheet document, inside inline style attributes and SVG presentational attributes, or choose to manipulate them on the fly using JavaScript. You can’t do any of this with preprocessor variables. This opens up a whole world of possibilities!
这意味着您可以在样式表文档中，内联样式属性和SVG表示属性中更新CSS变量，或选择使用JavaScript快速操作它们。 您不能使用预处理程序变量来执行任何操作。 这就打开了无限的可能性！
This is not to say that you need to choose between one or the other: nothing will stop you from taking advantage of the super powers of both CSS and preprocessor variables working together.
这并不是说您需要在一个或另一个之间进行选择：没有什么可以阻止您利用CSS和预处理器变量一起工作的超能力。
Although in this article I use the term CSS variables for simplicity’s sake, the official spec refers to them as CSS custom properties for cascading variables. The CSS custom property part looks like this:
尽管在本文中，为简单起见，我使用术语CSS变量 ，但官方规范将它们称为级联变量CSS自定义属性 。 CSS定制属性部分如下所示：
--my-cool-background: #73a4f4;You prefix the custom property with two dashes and assign a value to it like you would with a regular CSS property. In the snippet above, I’ve assigned a color value to --my-cool-background custom property.
您可以在custom属性前加上两个破折号，并为它分配一个值，就像使用常规CSS属性一样。 在上面的代码段中，我为--my-cool-background自定义属性分配了一个颜色值。
The cascading variable part consists in applying your custom property using the var() function, which looks like this:
级联变量部分包括使用var()函数应用自定义属性，如下所示：
var(--my-cool-background)The custom property is scoped inside a CSS selector and the var() part is used as value of a real CSS property:
custom属性的作用域是CSS选择器，而var()部分用作实际CSS属性的值：
:root { --my-cool-background: #73a4f4; } /* The rest of the CSS file */ #foo { background-color: var(--my-cool-background); }The snippet above scopes the --my-cool-background custom property to the :root pseudo-class, which makes its value available globally (it matches everything inside the <html> element). Then it uses the var() function to apply that value to the background-color property of the container with ID of foo, which as a consequence will now have a nice light blue background.
上面的代码段将--my-cool-background定制属性的范围--my-cool-background为:root伪类，这使其全局值可用(它匹配<html>元素内的所有内容)。 然后，它使用var()函数将该值应用于ID为foo的容器的background-color属性，因此该容器现在将具有漂亮的浅蓝色背景。
That’s not all. You can use the same nice light blue color value to style other color properties of multiple HTML elements, e.g., color, border-color, etc., simply by retrieving the custom property’s value using var(--my-cool-background) and applying it to the appropriate CSS property (of course, I recommend giving some thought to your naming convention for CSS variables before things get confusing):
那不是全部。 您可以使用相同的漂亮的浅蓝色值来设置多个HTML元素的其他颜色属性的样式，例如color ， border-color等，只需使用var(--my-cool-background)和将其应用到适当CSS属性(当然，我建议您在混淆之前考虑一下CSS变量的命名约定)：
p { color: var(--my-cool-background); }See the Pen Basic Workings of CSS Variables by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上SitePoint ( @SitePoint ) 编写 CSS变量的Pen 基本工作 原理 。
You can also set the value of a CSS variable with another CSS variable. For instance:
您还可以使用另一个CSS变量设置CSS变量的值。 例如：
--top-color: orange; --bottom-color: yellow; --my-gradient: linear-gradient(var(--top-color), var(--bottom-color));The snippet above creates the --my-gradient variable and sets it to the value of both the --top-color and --bottom-color variables to create a gradient. Now, you can modify your gradient at any time anywhere you have decided to use it by just changing the values of your variables. No need to chase all the gradient instances all over your stylesheets.
上面的代码段创建了--my-gradient变量，并将其设置为--top-color和--bottom-color变量的值，以创建渐变。 现在，您只需更改变量的值，即可在决定使用渐变的任何位置随时修改渐变。 无需在整个样式表中追踪所有渐变实例。
Here’s a live CodePen demo.
这是一个现场CodePen演示。
See the Pen Setting Value of CSS Variable with Another CSS Variable by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上SitePoint ( @SitePoint ) 提供的另一个CSS变量与CSS变量的笔设置值 。
Finally, you can include one or more fallback value/s with your CSS variable. For example:
最后，您可以在CSS变量中包含一个或多个备用值 。 例如：
var(--main-color, #333);In the snippet above, #333 is a fallback value. If fallbacks are not included, in case of invalid or unset custom properties, the inherited value will be applied instead.
在上面的代码段中， ＃333是后备值。 如果不包括回退，则自定义属性无效或未设置时，将应用继承的值。
Unlike regular CSS properties, CSS variables are case sensitive.
与常规CSS属性不同，CSS变量区分大小写。
For instance, var(--foo) and var(--FOO) refer to two different custom properties, --foo and --FOO respectively.
例如， var(--foo) --FOO var(--foo)和var(--FOO) --FOO分别引用两个不同的自定义属性--foo和--FOO 。
Like regular CSS properties, CSS variables are inherited. For example, let’s define a custom property with the value blue:
像常规CSS属性一样，CSS变量也是继承的。 例如，让我们定义一个自定义属性，其值为blue ：
:root { --main-color: blue; }All elements inside the root <html> element where you choose to apply the --main-color variable, will inherit the value blue.
您选择在其中应用--main-color变量的根<html>元素内的所有元素都将继承值blue 。
If you reassign a different value to your custom property inside another element, all children of this element will inherit the new value. For instance:
如果您在另一个元素内将不同的值重新分配给自定义属性，则该元素的所有子代都将继承新值。 例如：
:root { --main-color: blue; } .alert { --main-color: red; } p { color: var(--main-color); } <--! HTML --> <html> <head> <!-- head code here --> </head> <body> <div> <p>blue paragraph.</p> <div class="alert"> <p>red paragraph.</p> </div> </div> </body> </html>The first paragraph in the markup above inherits its value from the global --main-color variable, which makes it blue.
上面标记中的第一段从全局--main-color变量继承其值，从而使其--main-color蓝色。
The paragraph inside the div element with the class of .alert will be red because its color value is inherited from the locally scoped --main-color variable, which has the value of red.
div元素内具有.alert类的.alert将为红色，因为其颜色值是从局部范围内的--main-color变量继承的，该变量的值为red 。
See the Pen Simple Example of CSS Variables Inheritance by SitePoint (@SitePoint) on CodePen.
见笔CSS变量继承的简单示例由SitePoint( @SitePoint上) CodePen 。
Enough with the rules for now, let’s get coding!
现在有了足够的规则，让我们开始编码吧！
CSS variables and SVGs work great together! You can use CSS variables to modify both style and presentational attributes inside inline SVGs.
CSS变量和SVG协同工作！ 您可以使用CSS变量来修改内嵌SVG中的样式和表示属性。
Let’s say you’d like to have a different color for your SVG icons according to the parent container inside which they’re placed. You can scope your variables locally inside each parent container, set them to your desired color, and the icon inside each container will inherit the appropriate color from its parent.
假设您希望根据放置它们的父容器的SVG图标使用不同的颜色。 您可以在每个父容器内本地定义变量的范围，将其设置为所需的颜色，每个容器内的图标将从其父级继承适当的颜色。
Here are the relevant snippets:
以下是相关片段：
/* inline SVG symbol for the icon */ <svg> <symbol id="close-icon" viewbox="0 0 200 200"> <circle cx="96" cy="96" r="88" fill="none" stroke="var(--icon-color)" stroke-width="15" /> <text x="100" y="160" fill="var(--icon-color)" text-anchor="middle" style="font-size:250px;">x</text> </symbol> </svg> /* first instance of the icon */ <svg> <use xlink:href="#close-icon" /> </svg>The markup above uses the <symbol> tag, which enables you to create an invisible version of your SVG graphic. The code then instantiates a visible copy of the same graphic with the <use> tag. This method lets you create any number of icons and customize them individually to your liking by simply referencing the <symbol> element by its ID (#close-icon). This is more convenient than repeating the same chunck of code over and over again to recreate the image. If you need to brush up on this technique, Massimo Cassandro offers a quick tutorial in his Build Your Own SVG Icons.
上面的标记使用<symbol>标记，它使您可以创建SVG图形的不可见版本。 然后，代码<use>标记实例化同一图形的可见副本。 通过此方法，您可以创建任意数量的图标，并通过按其ID( #close-icon )引用<symbol>元素来分别自定义其#close-icon 。 这比一遍又一遍地重复相同的代码块来重新创建映像更为方便。 如果您需要使用此技术，Massimo Cassandro在他的“ Build Your Own SVG Icons”中提供了一个快速教程。
Notice the value of the stroke property inside the circle element and of the fill property inside the text element of the SVG symbol: they both apply a CSS variable, i.e., --icon-color, which is defined in the :root selector inside the CSS document, like so:
注意的值stroke圆元件内部和财产fill的SVG符号的文本元素内属性：它们都应用CSS变量，即--icon-color ，这是在所定义的:root内的选择器CSS文档，如下所示：
:root { --icon-color: black; }This is what the icon looks like at this point:
此时的图标如下所示：
If you now place an SVG icon inside different container elements and localize your variable inside each parent element’s selector with a different color value, you’ll have icons of different colors without having to add any more style rules. Cool!
如果现在将SVG图标放置在不同的容器元素中，并将变量以不同的颜色值本地化在每个父元素的选择器中，那么您将拥有不同颜色的图标，而无需添加任何其他样式规则。 凉！
To show this, let’s place an instance of the same icon inside the div with a class of .success.
为了说明这一点，让我们在div内将同一图标的实例放置为.success类。
The HTML:
HTML：
<div class="success"> <svg> <use xlink:href="#close-icon" /> </svg> </div>Now, localize the --icon-color variable by assigning the value green to it inside the .success selector and check the result.
现在，通过在.success选择器内.success分配绿色值来定位--icon-color变量，并检查结果。
The CSS:
CSS：
.success { --icon-color: green; }The icon’s color is now green:
图标的颜色现在为绿色：
Have a look at the full demo below:
看看下面的完整演示：
See the Pen Basic Use of SVG Icon and CSS Variables by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上SitePoint ( @SitePoint )的Pen SVG图标和CSS变量的Pen Basic使用 。
CSS variables can work with CSS animation, both on regular HTML elements and inline SVGs. Just remember to define the custom properties inside the selector that targets the element you want to animate, and refer to them with the var() function inside the @keyframes block.
CSS变量可以在常规HTML元素和内联SVG上与CSS动画一起使用。 只需记住在选择器内定义自定义属性即可，该选择器以要设置动画的元素为目标，并在@keyframes块内使用var()函数引用它们。
For instance, to animate an <ellipse> element with the class of .bubble inside an SVG graphic, your CSS could look like this:
例如，要在SVG图形中为带有.bubble类的<ellipse>元素设置动画，您CSS可能如下所示：
.bubble { --direction-y: 30px; --transparency: 0; animation: bubbling 3s forwards infinite; } @keyframes bubbling { 0% { transform: translatey(var(--direction-y)); opacity: var(--transparency); } 40% { opacity: calc(var(--transparency) + 0.2); } 70% { opacity: calc(var(--transparency) + 0.1); } 100% { opacity: var(--transparency); } }Notice how you can perform calculations with the var() function using CSS calc(), which adds even more flexibility to your code.
请注意，如何使用var()函数使用CSS calc()执行计算，这将为您的代码增加更大的灵活性。
The neat thing about using CSS variables in this case is that you can tweak your animations simply by modifying the variables’ values inside the appropriate selectors. No need to look for each of the properties inside all the @keyframes directives.
在这种情况下，使用CSS变量的巧妙之处在于，您可以通过在适当的选择器中修改变量的值来调整动画。 无需在所有@keyframes指令中查找每个属性。
Here’s the full CodePen demo for you to experiment with:
这是完整的CodePen演示供您尝试：
See the Pen Simple Animation with CSS Variables and SVG by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint ) 提供的带有CSS变量和SVG的钢笔简单动画 。
One more super cool thing you can do is access CSS variables directly from your JavaScript code.
您可以做的另一件事是直接从JavaScript代码访问CSS变量。
Let’s say you have a CSS variable called --left-pos with a value of 100px scoped to the .sidebar class in your CSS document:
假设您有一个CSS变量--left-pos ，其值为100px范围为CSS文档中的.sidebar类：
.sidebar { --left-pos: 100px; }Getting the value of --left-pos from your JavaScript code would look like this:
从JavaScript代码中获取--left-pos的值如下所示：
// cache the element you intend to target const sidebarElement = document.querySelector('.sidebar'); // cache styles of sidebarElement inside cssStyles const cssStyles = getComputedStyle(sidebarElement); // retrieve the value of the --left-pos CSS variable const cssVal = String(cssStyles.getPropertyValue('--left-pos')).trim(); // log cssVal to print the CSS // variable's value to the console: 100px console.log(cssVal);To set a CSS variable with JavaScript, you can do something like this:
要使用JavaScript设置CSS变量，您可以执行以下操作：
sidebarElement.style.setProperty('--left-pos', '200px');The snippet above sets the value of the --left-pos variable for the sidebar element to 200px.
上面的代码段将侧边栏元素的--left-pos变量的值设置为200px 。
I find adding interactivity to a web page using CSS variables much more straightforward and maintainable than toggling a bunch of classes or rewriting entire CSS rules on the fly.
我发现使用CSS变量将交互性添加到网页中比直接切换一堆类或动态重写整个CSS规则更加直接和可维护。
Have a look at the CodePen demo below, where you can interactively toggle a sidebar and change the blend mode property and the background color using only CSS variables and JavaScript:
看看下面的CodePen演示，您可以在其中交互式地切换边栏并仅使用CSS变量和JavaScript来更改混合模式属性和背景色：
See the Pen Blend Modes, CSS Variables and JavaScript by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )的笔混合模式，CSS变量和JavaScript 。
Except for IE11 (which has no support for CSS variables), all major browsers have full support for CSS variables.
除了IE11(不支持CSS变量)之外，所有主流浏览器都完全支持CSS变量 。
One way your code can cater for non-supporting browsers is to use the @supports block with a dummy conditional query:
您的代码可以满足不支持的浏览器的一种方法是将@supports块与虚拟条件查询一起使用：
section { color: gray; } @supports(--css: variables) { section { --my-color: blue; color: var(--my-color, 'blue'); } }Given that @supports works in IE/Edge, this will do the trick. If you also take advantage of fallback values inside the var() function, your code will be even more foolproof and degrade gracefully in less capable browsers.
鉴于@supports可在IE / Edge中工作，因此可以解决问题。 如果您还利用var()函数中的后备值，则代码将更加安全，并且在性能较低的浏览器中会优雅地降级。
As a result, in Chrome and other supporting browsers, the text inside the <section> element will be blue:
结果，在Chrome和其他支持的浏览器中， <section>元素内的文本将变为蓝色：
IE11, which has no support for CSS variables, renders the page with gray-colored text:
IE11不支持CSS变量，它使用灰色文本呈现页面：
Check out the live demo:
查看现场演示：
See the Pen @supports with CSS Variables by SitePoint (@SitePoint) on CodePen.
见笔@supports与CSS变量由SitePoint( @SitePoint上) CodePen 。
One downside to this approach is that if you use CSS variables a lot and non-supporting browsers are a priority in your current project, then the code could get somewhat complicated and a bit of a nightmare to maintain.
这种方法的一个缺点是，如果您大量使用CSS变量，并且在当前项目中优先使用不支持的浏览器，则代码可能会变得有些复杂，并且有些噩梦。
In this case, you could opt for PostCSS with cssnext, which lets you write cutting-edge CSS code and make it compatible with non supporting browsers (a bit like transpilers do for JavaScript). If you’re curious about PostCSS, SitePoint Premium makes available an excellent video course on this topic to all its members.
在这种情况下，您可以选择带cssnext的PostCSS ，它使您可以编写最先进CSS代码并使其与不支持的浏览器兼容(有点像JavaScript的编译器一样)。 如果您对PostCSS感到好奇，SitePoint Premium会为其所有成员提供有关此主题的出色视频课程 。
To learn more about the ins and outs of CSS variables, including browser support workarounds and interesting use cases, check out the resources below:
要了解有关CSS变量的详细信息，包括浏览器支持的解决方法和有趣的用例，请查看以下资源：
CSS Custom Properties for Cascading Variables Module Level 1 — W3C Spec
级联变量模块级别1CSS自定义属性 — W3C规范
Using CSS variables — MDN
使用CSS变量 -MDN
Lea Verou’s Talk on CSS Variables for CSSConf Asia 2016 (video)
Lea Verou关于CSSConf Asia 2016 CSS变量的演讲 (视频)
What is the difference between CSS variables and preprocessor variables? — Chris Coyier (CSS-Tricks)
CSS变量和预处理器变量之间有什么区别？ -克里斯·科耶(CSS-Tricks)
It’s Time To Start Using CSS Custom Properties — Serg Hospodarets (Smashing Magazine)
是时候开始使用CSS自定义属性了 -Serg Hospodarets(Smashing Magazine)
Locally Scoped CSS Variables: What, How, and Why — Una Kravets
局部范围CSS变量：什么，如何以及为什么 — Una Kravets
Pragmatic, Practical, and Progressive Theming with Custom Properties — Harry Roberts (CSS Wizardry)
具有自定义属性的实用，实用和渐进式主题 — Harry Roberts(CSS Wizardry)
Customizable SVG Icons with CSS Variables — Amelia Bellamy-Royds (CodePen).
具有CSS变量的可定制SVG图标 -Amelia Bellamy-Royds(CodePen)。
Animation with CSS Variables — Wes Bos
具有CSS变量的动画 — Wes Bos
Update CSS Variables with JS — Wes Bos
使用JS更新CSS变量 — Wes Bos
Simple responsive grid with CSS variables — Chris Coyier
具有CSS变量的简单响应式网格 — Chris Coyier
Slack Theming with CSS Custom Properties — Stephanie
使用CSS自定义属性的松弛主题-Stephanie
Ana Tudor’s CSS variables demos on CodePen.
Ana TudorCSS变量在CodePen上演示 。
What are you waiting for? Give CSS variables a try and let me know what you think in the comments!
你在等什么？ 试试看CSS变量，让我知道您在评论中的想法！
翻译自: https://www.sitepoint.com/practical-guide-css-variables-custom-properties/
js设置css自定义变量
相关资源：jdk-8u281-windows-x64.exe