js设置css自定义变量_CSS中的变量：自定义属性

js设置css自定义变量

The following is a short extract from Tiffany’s book, CSS Master, 2nd Edition.

以下是Tiffany的书CSS Master，第二版的摘录。

For years, variables were one of the most commonly requested CSS features. Variables make it easier to manage colors, fonts, size, and animation values, and to ensure their consistency across a codebase.

多年来，变量一直是最常用CSS功能之一。 变量使管理颜色，字体，大小和动画值以及确保它们在整个代码库中的一致性更加容易。

It took years to work through the details of the syntax and decide how variables would fit into existing rules governing the cascade and inheritance. Now they’re available to developers in the form of CSS “custom properties”.

花了数年的时间来仔细研究语法的细节，并确定变量如何适应管理级联和继承的现有规则。 现在，开发人员可以以CSS“自定义属性”的形式使用它们。

In this chapter, we’ll discuss the syntax of CSS custom properties. We’ll look at:

在本章中，我们将讨论CSS自定义属性的语法。 我们来看一下：

• how to define properties and set default values for those properties
  如何定义属性并为这些属性设置默认值
• how the rules of the cascade and inheritance work with custom properties
  级联和继承的规则如何与自定义属性一起使用
• how to use custom properties with media queries
  如何在媒体查询中使用自定义属性

By the end, you should have a good grasp of how to use custom properties in your projects.

最后，您应该掌握如何在项目中使用自定义属性。

Note: Browser support for custom variables is robust, existing in the latest versions of every major browser. Support is not, however, available in older yet recently released browser versions that may still be widely used by your site’s audience. Versions of Microsoft Edge prior to 15 and Safari prior to version 9.1 lack support entirely. The same is true for any version of Internet Explorer. Microsoft Edge 15 has support, but also has a few documented bugs.

注意：浏览器对自定义变量的支持非常强大，每个主要浏览器的最新版本中都存在。 但是，较旧的但最近发布的浏览器版本不提供支持，该版本可能仍被站点的受众广泛使用。 15之前的Microsoft Edge和9.1之前的Safari版本完全缺乏支持。 任何版本的Internet Explorer都是如此。 Microsoft Edge 15有支持，但也有一些已记录的错误。

定义自定义属性 (Defining a Custom Property)

To define a custom property, select a name and prefix it with two hyphens. Any alphanumeric character can be part of the name. Hyphen (-) and underscore (_) characters are also allowed. A broad range of unicode characters can be part of a custom property name, including emojis. For the sake of clarity and readability, stick to alphanumeric names.

要定义自定义属性，请选择一个名称，并在名称前加上两个连字符。 任何字母数字字符都可以是名称的一部分。 也允许使用连字符( - )和下划线( _ )。 各种各样的unicode字符可以是自定义属性名称的一部分，包括表情符号。 为了清楚和易读，请使用字母数字名称。

Here’s an example:

这是一个例子：

--primarycolor: #0ad0f9ff; /* Using #rrggbbaa color notation */

The -- indicates to the CSS parser that this is a custom property. The value of the property will replace the property wherever it’s used as a variable.

--指示CSS解析器这是一个自定义属性。 该属性的值将替换用作变量的属性。

Custom property names are case-sensitive. In other words, --primaryColor and --primarycolor are considered two distinct property names. That’s a departure from traditional CSS, in which property and value case doesn’t matter. It is, however, consistent with the way ECMAScript treats variables.

自定义属性名称区分大小写 。 换句话说，-- --primaryColor和--primarycolor被认为是两个不同的属性名称。 这与传统CSS有所不同，在传统CSS中，属性和值的大小写无关紧要。 但是，它与ECMAScript处理变量的方式一致。

As with other properties, such as display or font, CSS custom properties must be defined within a declaration block. One common pattern is to define custom properties within a ruleset that uses the :root psuedo-element as a selector:

与其他属性(例如display或font ，必须在声明块中定义CSS自定义属性。 一种常见的模式是在使用:root psuedo-element作为选择器的规则集中定义自定义属性：

:root {
    --primarycolor: #0ad0f9ff;
}

:root is a pseudo-element that refers to the root element of the document. For HTML documents, that’s the html element. For SVG documents, it’s the svg element. By using :root, properties are immediately available throughout the document.

:root是一个伪元素，它引用文档的根元素。 对于HTML文档，这就是html元素。 对于SVG文档，它是svg元素。 通过使用:root ，属性将在整个文档中立即可用。

使用自定义属性 (Using Custom Properties)

To use a custom property value as a variable, we need to use the var() function. For instance, if we wanted to use our --primarycolor custom property as a background color, we’d use the following:

要将自定义属性值用作变量，我们需要使用var()函数。 例如，如果我们要使用--primarycolor自定义属性作为背景色，则可以使用以下内容：

body {
    background-color: var(--primarycolor);
}

Our custom property’s value will become the computed value of the background-color property.

我们的自定义属性的值将成为background-color属性的计算值。

To date, custom properties can only be used as variables to set values for standard CSS properties. You can’t, for example, store a property name as a variable and then reuse it. The following CSS won’t work:

迄今为止，自定义属性只能用作设置标准CSS属性值的变量。 例如，您不能将属性名称存储为变量，然后再使用它。 以下CSS无效：

:root {
    --top-border: border-top; /* Can't set a property as custom property's value */
    var(--top-border): 10px solid #bc84d8 /* Can't use a variable as a property */
}

You also can’t store a property–value pair as a variable and reuse it. The following example is also invalid:

您也不能将属性值对存储为变量并重复使用。 以下示例也是无效的：

:root {
   --text-color: 'color: orange'; /* Invalid property value */
}
body {
  var(--text-color); /* Invalid use of a property */
}

Lastly, you also can’t concatenate a variable as part of a value string:

最后，您也不能将变量连接为值字符串的一部分：

:root {
    --base-font-size: 10;
}
body {
    font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax. */
}

Custom properties were designed to be used as properties that are parsed according to the CSS specification. Should the CSS Extensions specification be adopted by browser vendors, we could someday use custom properties to create custom selector groups, or custom at-rules. For now, however, we’re limited to using them as variables to set standard property values.

定制属性被设计为用作根据CSS规范进行解析的属性。 如果浏览器供应商采用CSS扩展规范，则有一天我们可以使用自定义属性来创建自定义选择器组或自定义规则。 但是，目前，我们仅限于将它们用作设置标准属性值的变量。

设置后备值 (Setting a Fallback Value)

The var() function actually accepts up to two arguments. The first argument should be a custom property name. The second argument is optional, but should be a declaration value. This declaration value functions as a kind of fallback value if the custom property value hasn’t been defined.

var()函数实际上最多接受两个参数。 第一个参数应为自定义属性名称。 第二个参数是可选的，但应为声明值。 如果尚未定义自定义属性值，则此声明值用作一种后备值。

Let’s take the following CSS:

让我们采用以下CSS：

.btn__call-to-action {
    background: var(--accent-color, salmon);
}

If --accent-color is defined—let’s say its value is #f30—then the fill color for any path with a .btn__call-to-action class attribute will have a red-orange fill. If it’s not defined, the fill will be salmon.

如果定义了--accent-color (假设其值为#f30 ，那么具有.btn__call-to-action类属性的任何路径的填充色将具有橘红色。 如果未定义，则填充为鲑鱼。

Declaration values can also be nested. In other words, you can use a variable as the fallback value for the var function:

声明值也可以嵌套。 换句话说，您可以将变量用作var函数的后备值：

body {
    background-color: var(--books-bg, var(--arts-bg));
}

In the CSS above, if --books-bg is defined, the background color will be set to the value of the --books-bg property. If not, the background color will instead be whatever value was assigned to --arts-bg. If neither of those are defined, the background color will be the initial value for the property—in this case transparent.

在上面CSS中，如果定义了--books-bg ，则背景色将设置为--books-bg属性的值。 如果不是，则背景颜色将改为分配给--arts-bg任何值。 如果两者都未定义，则背景色将是该属性的初始值-在这种情况下为transparent 。

Something similar happens when a custom property is given a value that’s invalid for the property it’s used with. Consider the following CSS:

当自定义属性的值对其使用的属性无效时，也会发生类似的情况。 考虑以下CSS：

:root {
    --footer-link-hover: #0cg; /* Not a valid color value. */
}
a:link {
     color: blue;
}
a:hover {
    color: red;
}
footer a:hover {
    color: var(--footer-link-hover);
}

In this case, the value of the --footer-link-hover property is not a valid color. In Microsoft Edge, the hover state color for footer links will be inherited from the a:hover selector. In most other browsers, the hover state color will be inherited from the text color of the body element.

在这种情况下，-- --footer-link-hover属性的值不是有效的颜色。 在Microsoft Edge中，页脚链接的悬停状态颜色将从a:hover选择器继承。 在大多数其他浏览器中，悬停状态颜色将继承自body元素的文本颜色。

自定义属性和级联 (Custom Properties and the Cascade)

Custom properties also adhere to the rules of the cascade. Their values can be overridden by subsequent rules:

自定义属性还遵守级联规则。 它们的值可以被后续规则覆盖：

:root {
    --text-color: #190736; /* navy */
}
body {
   --text-color: #333;  /* Dark gray */
}
body {
  color: var(--text-color);
}

In the example above, our body text would be dark gray. We can also reset values on a per-selector basis. Let’s add a couple more rules to this CSS:

在上面的示例中，我们的正文为深灰色。 我们还可以基于每个选择器重置值。 让我们向此CSS添加更多规则：

:root {
    --text-color: #190736; /* navy */
}
body {
   --text-color: #333;  /* Dark gray */
}
p {
  --text-color: #f60; /* Orange */
}
body {
  color: var(--text-color);
}
p {
  color: var(--text-color)
}

In this case, any text that’s wrapped in p element tags would be orange. But text within div or other elements would still be dark gray.

在这种情况下，包裹在p元素标签中的所有文本均为橙色。 但是div或其他元素中的文本仍为深灰色。

It’s also possible to set the value of a custom property using the style attribute—for example, style="--brand-color: #9a09af"—which can be useful in a component-based, front-end architecture.

也可以使用style属性(例如style="--brand-color: #9a09af"设置自定义属性的值，这在基于组件的前端体系结构中很有用。

翻译自: https://www.sitepoint.com/variables-in-css-custom-properties/

js设置css自定义变量