js设置css⾃定义变量_CSS变量实⽤指南（⾃定义属性）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. — or “custom properties”, as they’re officially called — are already here and have great browser support, while .
近年来，⼀些动态功能已经开始作为CSS语⾔本⾝的⼀部分出现。 (或正式称为“⾃定义属性”)已经存在，并且具有强⼤的浏览器⽀持，⽽。
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 (Don’t Repeat Yourself).
在本⽂中，您将发现如何开始将CSS变量集成到CSS开发⼯作流程中，以使样式表更易于维护和 (不要重复⾃⼰)。
Let’s dive right in!
让我们潜⼊吧！
什么是CSS变量？ (What are CSS Variables?)
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); // 7
number1 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 a
nd 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世界中令⼈兴奋的现实，⽽且正如您很快就会发现的那样，这项很棒的新技术⾮常容易学习和使⽤。
使⽤CSS变量有好处吗？ (Are There Benefits to Using CSS Variables?)
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属性中更改⼀次该值即可，更改将⾃动传播到该变量的所有使⽤。
.
。
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属性中更改该值时，在项⽬中编辑原⾊将更加容易。
CSS变量和预处理器变量之间有什么区别？ (What’s the Difference Between CSS Variables and Preprocessor Variables?)
One way you might have been taking advantage of the flexibility of variables when styling websites is by using
preprocessors like and .
在设计⽹站样式时，您可能⼀直利⽤变量的灵活性的⼀种⽅法是使⽤和等预处理器。
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变量，或选择使⽤JavaSc
ript快速操作它们。 您不能使⽤预处理程序变量来执⾏任何操作。 这就打开了⽆限的可能性！
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和预处理器变量⼀起⼯作的超能⼒。
CSS变量：语法 (CSS Variables: The Syntax)
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 multi
ple 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 by SitePoint () on .
请参阅上 ( ) 的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 by SitePoint () on .
请参阅上 ( ) 的笔 。
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是后备值。 如果不包括回退，则⾃定义属性⽆效或未设置时，将应⽤继承的值。
CSS变量区分⼤⼩写 (CSS Variables Are Case Sensitive)
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 。
CSS变量受级联影响 (CSS Variables Are Subject to the Cascade)
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.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。