如何在CSS中使用变量
前言
CSS 变量（官方称为自定义属性）是用户定义的值，它可以在你的代码库中设置一次并多次使用。它们使管理颜色、字体、大小和动画值变得更加容易，并确保整个 web 应用的一致性。
举个例子，你可以将品牌颜色设置为一个 CSS 属性（--primarycolor: #7232FA），并在任何使用品牌颜色的组件或样式中使用这个值（background: var(--primarycolor);）。
除了更加简洁以及不重复的代码，CSS 变量可用于构建调色板，提高响应能力，并创建动态类型系统。
定义 CSS 变量
要定义一个自定义属性，选择一个名称并在其前面加上两个连字符。任何字母数字字符都可以是名称的一部分。连字符（-）和下划线（_）也是被允许的。大范围的 Unicode 字符可以成为自定义属性名称的一部分。这也包括 emoji，但为了清晰度和可读性，请坚持使用字母数字名称。
下面是个例子：
--primarycolor: #0ad0f9ff; /* RGB alpha 16 进制颜色 */
--向 CSS 解释器表明这是一个自定义属性。当作为一个变量使用时，解释器引擎会将该属性替换为其值。
自定义属性名称是区分大小写的。这意味着--primaryColor 和 --primarycolor 被认为是两种不同的属性名称。这与传统的 CSS 不同，在传统的 CSS 中，属性和值的大小写并不重要。然而，它与 ECMAScript 中的变量名规则是一致的。
与其他属性一样，比如说display或者font，CSS 自定义属性必须定义在声明块内。一个常见的模式是使用 :root 伪元素作为选择器来定义自定义属性。
:root {
--primarycolor: #0ad0f9ff;
}
:root是一个伪元素，它指向文档中的根元素。对 HTML 文档而言，指向的就是<html>元素。对 SVG 文档而言，指向的就是<svg>元素。使用:root 会让属性在整个文档中立即可用。
使用 CSS 变量
为了让自定义属性作为变量来使用，我们需要使用var()函数。例如，如果我们想将--primarycolor自定义属性作为背景颜色来使用，我们需要这么做：
body {
background-color: var(--primarycolor);
}
我们自定义属性的值将成为background-color属性的计算值。
到目前为止，自定义属性只能被用作变量来为标准的 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 */
}
你也不能把属性 - 值对存储为一个变量，然后重用它。下面的例子也是无效的：
:root {
--text-color: 'color: orange'; /* Invalid property value */
}
body {
var(--text-color); /* Invalid use of a property */
}
最后，你不能把一个变量作为值的一部分拼接起来：
:root {
--base-font-size: 10;
}
body {
font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}
CSS 自定义属性 VS CSS 变量
"自定义属性" 是一个面向未来的名称，它说明了这个功能有一天可能会被使用。然而，如果浏览器供应商实施了CSS 扩展规范，这种情况就会改变。该规范定义了用自定义选择器组合、函数和at-rules来扩展 CSS 的方法。
我们通常称自定义属性为 "变量"，到目前为止，这也是我们可以使用它们的唯一方式。在理论上，它们并不是完全可以互换的术语。不过目前为止在实践中是可以互换的术语。在这篇文章中，我主要使用自定义属性，因为那是它们的正确叫法。如果能是句子更加清晰，我将使用变量的叫法。
设置备用值
var()函数接收两个参数。第一个参数是自定义属性名称。第二个参数是可选的，但必须是声明值。这个声明值的功能是当自定义属性值没有被定义时，作为一个备用值或默认值被应用。
让我们来看看下面的 CSS：
.btn__call-to-action {
background: var(--accent-color, deepskyblue);
}
如果定义了--accent-color ，我们假设其值为#f30 ，那么任何带有.btn__call-to-action类的背景色将是橘红色的。如果没有定义，背景色将是深天蓝色。
声明值也可以嵌套。换句话说，可以使用变量作为var函数的备用值。
body {
background-color: var(--books-bg, var(--arts-bg));
}
在上面 CSS 中，如果定义了--books-bg ，背景色将会被设置为--books-bg 属性的值。如果没有定义，背景色将是分配给 --arts-bg 的任何值。如果两个属性都没有定义，背景色将会是属性的初始值。在这个例子中，初始值为transparent 。
当一个自定义属性的值对它所使用的属性来说是无效的，也会发生类似的情况。可以考虑下面的 CSS：
:root {
--text-primary: #600;
--footer-link-hover: #0cg; /* Not a valid color value */
}
body {
color: var(--text-primary);
}
a:link {
color: blue;
}
a:hover {
color: red;
}
footer a:hover {
color: var(--footer-link-hover);
}
在这个例子中，--footer-link-hover 属性的值不是有效颜色。反而，footer a:hover 从<body>元素中继承了color值。
解析自定义属性的方式与解析其他 CSS 值的方式相同。倘若值是无效的或者未定义的，如果属性是可继承的，CSS 解析器就会使用继承的值（比如说color或font）。如果属性是不可继承的，CSS 解析器就会使用初始值（比如说background-color）。
层叠值
自定义属性也遵循层叠的规则。它们的值会被后续的规则所覆盖：
:root {
--text-color: #190736; /* navy */
}
body {
--text-color: #333; /* dark gray */
}
body {
color: var(--text-color);
}
在上述示例中，body字体颜色将会是深灰色。我们还可以在每个选择器的基础上重置值。让我们向这个 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)
}
在这个例子中，任何包裹在<p>标签内的文本会是橘黄色。但是<div>内的文本或是其他元素内的文本仍然是深灰色。
也可以使用style属性来设置自定义属性的值。比如说，style="--brand-color: #9a09af" 。
调色板
自定义属性特别适合管理 HSL 调色板。HSL 代表hue, saturation, lightness 。这是一款基于亮度的颜色模型，类似于 RGB。我们可以在 CSS 中使用 HSL，这要归功于hsl()和hsla()颜色函数。hsl()函数接收三个参数，分别是 hue, saturation, 和 lightness，也就是色相、饱和度、亮度。hsla() 函数同时接收第四个参数，表示颜色的alpha透明度（取值范围是 0-1 之间）。
RGB 系统用红、绿、蓝的比例来表达颜色，而 HSL 则使用一个颜色圈，色相是该圈上的一个度数位置，而色调或阴影则用饱和度和亮度值来定义。饱和度的范围从 0% 到 100%，其中 0% 是灰色，100% 是全色。亮度的范围也是从 0% 到 100%，其中 0% 是黑色，100% 是白色，50% 是正常颜色。
在 HSL 颜色系统中，主要颜色红、绿、蓝三原色在 0 度 /360 度、120 度和 240 度处相距 120 度。二级颜色 -- 青色、品红和黄色 -- 也相距 120 度，但位于主要颜色的对面，分别为 180 度、300 度和 60 度 /420 度。三级、四级和其他颜色则以大约 10 度的增量介于两者之间。蓝色用 HSL 来写的话，将会是hsl(240, 100%, 50%)。
HSL 参数单位
当你在hsl()和hsla()函数的第一个参数中使用无单位的值时，浏览器会假定它是一个以度为单位的角度。然而，你可以使用任何受支持的 CSS 角度单位。蓝色也可以表示为hsl(240deg, 100%, 50%), hsl(4.188rad, 100%, 50%) 或者 hsla(0.66turn, 100%, 50%) 。
这就是有趣的地方。我们可以使用自定义属性设置色相值，以及通过调整饱和度和亮度来设置更亮和更暗的阴影：
:root {
--brand-hue: 270deg; /* purple */
--brand-hue-alt: .25turn; /* green */
/*
hsl()和 hsla() 可以接受逗号分隔的参数或空格分隔的参数。
但旧的浏览器（如 Internet Explorer 11）只支持逗号分隔的参数。
*/
<span class="hljs-attr">--brand-primary</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue ) <span class="hljs-number">100%</span> <span class="hljs-number">50%</span> );
<span class="hljs-attr">--brand-highlight</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue ) <span class="hljs-number">100%</span> <span class="hljs-number">75%</span> );
<span class="hljs-attr">--brand-lowlight</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue ) <span class="hljs-number">100%</span> <span class="hljs-number">25%</span> );
<span class="hljs-attr">--brand-inactive</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue ) <span class="hljs-number">50%</span> <span class="hljs-number">50%</span> );
<span class="hljs-attr">--brand-secondary</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue-alt ) <span class="hljs-number">100%</span> <span class="hljs-number">50%</span> );
<span class="hljs-attr">--brand-2nd-highlight</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue-alt ) <span class="hljs-number">100%</span> <span class="hljs-number">75%</span> );
<span class="hljs-attr">--brand-2nd-lowlight</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue-alt ) <span class="hljs-number">100%</span> <span class="hljs-number">25%</span> );
<span class="hljs-attr">--brand-2nd-inactive</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>( --brand-hue-alt ) <span class="hljs-number">50%</span> <span class="hljs-number">50%</span> );
}
上面的 CSS 提供了下面所示的调色板。
这是一个简易版本，但你也可以使用自定义属性来调整饱和度和亮度值。
健全的调色板生成
另一个想法是结合自定义属性和calc()函数，从一个基本色调中生成一个方形的配色方案。让我们在下面的例子中创建一个方形配色方案。一个方形配色方案由四种颜色组成，这些颜色在色轮上彼此等距，也就是相距 90 度：
:root {
--base-hue: 310deg; /* Hot pink */
--distance: 90deg;
<span class="hljs-attr">--color-a</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">var</span>(--base-hue), <span class="hljs-number">100%</span>, <span class="hljs-number">50%</span> );
<span class="hljs-attr">--color-b</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">calc</span>( <span class="hljs-built_in">var</span>(--base-hue) + <span class="hljs-built_in">var</span>( --distance ) ), <span class="hljs-number">100%</span>, <span class="hljs-number">50%</span> );
<span class="hljs-attr">--color-c</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">calc</span>( <span class="hljs-built_in">var</span>(--base-hue) + ( <span class="hljs-built_in">var</span>( --distance ) * <span class="hljs-number">2</span> ) ), <span class="hljs-number">100%</span>, <span class="hljs-number">50%</span> );
<span class="hljs-attr">--color-d</span>: <span class="hljs-built_in">hsl</span>( <span class="hljs-built_in">calc</span>( <span class="hljs-built_in">var</span>(--base-hue) + ( <span class="hljs-built_in">var</span>( --distance ) * <span class="hljs-number">3</span> ) ), <span class="hljs-number">100%</span>, <span class="hljs-number">50%</span> );
}
CSS 为我们提供了如下所示的颇具热带风情的色彩方案。
自定义属性也能很好地与媒体查询相互配合，我们会在后面章节中看到。
深色主题调色板
你可以使用 CSS 自定义变量为你的网站，定义与深色和浅色主题相关的一系列的变量。
以下面的页面样式为例，我们可以在:root中为相应的颜色定义了自定义属性后，用变量替换不同选择器中所有的 HSL 颜色：
:root {
/*...*/
--nav-bg-color: hsl(var(--primarycolor) , 50%, 50%);
--nav-text-color: hsl(var(--primarycolor), 50%, 10%);
--container-bg-color: hsl(var(--primarycolor) , 50%, 95%);
--content-text-color: hsl(var(--primarycolor) , 50%, 50%);
--title-color: hsl(var(--primarycolor) , 50%, 20%);
--footer-bg-color: hsl(var(--primarycolor) , 93%, 88%);
--button-text-color: hsl(var(--primarycolor), 50%, 20%);
}
已经为自定义属性使用了适当的名称。比如说，--nav-bg-color 指的是导航栏背景色，--nav-text-color 指的是导航栏前景色或者文本色。
然后，复制:root选择器及其内容，但要为其添加一个带有dark值的主题属性：
:root[theme='dark']{
/*...*/
}
如果带有dark值的主题属性被添加到<html>元素上，那么该主题将被激活。
现在我们可以手动操作这些变量值，通过减少 HSL 颜色的亮度值来提供一个深色主题。或者我们可以使用其他技术，如invert()和brightness()等 CSS 过滤器，它们通常用于调整图像的渲染，但也可用于其他任何元素。
添加如下代码到:root[theme='dark']中：
:root[theme='dark'] {
--dark-hue: 240;
--light-hue: 250;
--primarycolor: var(--dark-hue);
--nav-bg-color: hsl(var(--primarycolor), 50%, 90%);
--nav-text-color: hsl(var(--primarycolor), 50%, 10%);
--container-bg-color: hsl(var(--primarycolor), 50%, 95%);
--content-text-color: hsl(var(--primarycolor), 50%, 50%);
--title-color: hsl(--primarycolor, 50%, 20%);
--footer-bg-color: hsl(var(--primarycolor), 93%, 88%);
--button-text-color: hsl(var(--primarycolor), 50%, 20%);
filter: invert(1) brightness(0.6);
}
invert()过滤器会反转所选元素的所有颜色（在本例中是每个元素）。反转的值可以用百分比或数字来指定。参数值 100% 或 1 将完全反转元素的色相、饱和度和亮度值。
brightness()过滤器使元素更加明亮或者暗黑。如果数值为 0，就会出现一个完全暗黑的元素。
invert()过滤器会使一些元素变得非常明亮。需要通过设置brightness(0.6)来降低亮度。
具有不同程度深色的深色主题：
使用 JavaScript 切换主题
现在，当用户点击深色 / 浅色按钮时，我们使用 JavaScript 来切换深色和浅色主题。在 HTML</body>标签闭合前添加行内<script>标签，标签内具有如下代码：
const toggleBtn = document.querySelector("#toggle-theme");
toggleBtn.addEventListener('click', e => {
console.log("Switching theme");
if(document.documentElement.hasAttribute('theme')){
document.documentElement.removeAttribute('theme');
}
else{
document.documentElement.setAttribute('theme', 'dark');
}
});
Document.documentElement指的是文档中的根 DOM 元素，也就是<html>。这段代码使用.hasAttribute()方法检查theme属性是否存在。如果不存在，就将dark添加到该属性上，从而导致切换到深色主题。否则，它将删除该属性，从而导致切换到浅色主题。
注意：你还应该把它与 CSS 中的prefers-color-scheme功能结合起来使用，它可以用来从用户的操作系统或用户代理（浏览器）设置中自动改变浅色 / 深色主题。这将在下一节中展示。
媒体查询
我们还可以在媒体查询中使用自定义属性。比如说，你可以使用自定义属性来定义明暗配色方案：
:root {
--background-primary: hsl(34, 78%, 91%);
--text-primary: hsl(25, 76%, 10%);
--button-primary-bg: hsl(214, 77%, 10%);
--button-primary-fg: hsl(214, 77%, 98%);
}
@media screen and ( prefers-color-scheme: dark ) {
:root {
--background-primary: hsl(25, 76%, 10%);
--text-primary: hsl(34, 78%, 91%);
--button-primary-bg: hsl(214, 77%, 98%);
--button-primary-fg: hsl(214, 77%, 10%);
}
}
同样地，我们可以使用自定义属性来改变适合于屏幕与打印的基准字体大小。
:root {
--base-font-size: 10px;
}
@media print {
:root {
--base-font-size: 10pt;
}
}
html {
font: var(--base-font-size) / 1.5 sans-serif;
}
body {
font-size: 1.6rem;
}
在本例中，我们正在使用适合于打印和屏幕的媒体单位。对于这两种媒体，我们将使用 10 个单位的基准字体大小，对于屏幕来说是像素（px），对于打印来说是点（pt）。我们还将使用--base-font-size:的值来为我们的根元素（html）设置一个起始尺寸。然后我们可以rem单位来调整相对于基准字体尺寸的排版。
在 JavaScript 中使用自定义属性
请记住：自定义属性是 CSS 属性，而且我们可以与它们进行互动。比如说，我们可以使用CSS.supports()API 来检测浏览器是否支持自定义属性：
const supportsCustomProps = CSS.supports('--primary-text: #000');
// 如果浏览器支持自定义属性，则打印 true
console.log(supportsCustomProps);
我们也可以使用setProperty()方法来设置自定义属性值：
document.body.style.setProperty('--bg-home', 'whitesmoke');
使用removeProperty()的方式也是类似的。只需传递自定义属性名称作为参数：
document.body.style.removeProperty('--bg-home');
要使用自定义属性作为 JavaScript 的值，可以使用var()函数，并将属性名称作为其参数。
document.body.style.backgroundColor = 'var(--bg-home)';
还有，你不能使用style对象的方括号语法或驼峰属性来设置自定义属性。换句话说，document.body.style.--bg-home或document.body.style['--bg-home'] 都无法发挥作用。
在组件中使用自定义属性
像 React、Angular 和 Vue 这样的 JavaScript 框架让开发者使用 JavaScript 来创建可重用、可共享的 HTML 块，通常会在组件层面上定义 CSS。
这是一个有关 React 组件的示例，使用 JSX 语法编写：
import React from 'react';
/* Importing the associated CSS into this component */
import '../css/field-button.css';
class FieldButtonGroup extends React.Component {
render() {
return (
<div className="field__button__group">
<label htmlFor={this.props.id}>{this.props.labelText}</label>
<div>
<input type={this.props.type}
name={this.props.name}
id={this.props.id}
onChange={this.props.onChangeHandler} />
<button type="submit">{this.props.buttonText}</button>
</div>
</div>
);
}
}
export default FieldButtonGroup;
我们的 React 组件将 CSS 导入到一个 JavaScript 文件中。编译时，field-button.css的内容被内联加载。这里有一个可行的方法来使用自定义属性：
.field__button__group label {
display: block;
}
.field__button__group button {
flex: 0 1 10rem;
background-color: var(--button-bg-color, rgb(103, 58, 183)); /* include a default */
color: #fff;
border: none;
}
在该示例中，我们使用自定义属性--button-bg-color作为按钮的背景颜色，同时伴随着默认颜色，以防--button-bg-color没有定义。在这里，我们可以在全局样式表或通过style属性设置--button-bg-color 的值。
让我们将值设置为 React 属性。React props（简称为属性）模仿元素属性。它们是一种将数据传入 React 组件的方式。在本例中，我们将添加一个名为buttonBgColor的属性：
import FieldButtonGroup from '../FieldButtonGroup';
class NewsletterSignup extends React.Component {
render() {
// For brevity, we've left out the onChangeHandler prop.
return (
<FieldButtonGroup type="email" name="newsletter" id="newsletter"
labelText="E-mail address" buttonText="Subscribe"
buttonBgColor="rgb(75, 97, 108)" />
);
}
}
export default NewsletterSignup;
现在，我们需要更新FieldButtonGroup组件，来支持本次更改：
class FieldButtonGroup extends React.Component {
render() {
/*
In React, the style attribute value must be set using a JavaScript
object in which the object keys are CSS properties. Properties
should either be camelCased (e.g. backgroundColor) or enclosed in
quotes.
*/
<span class="hljs-keyword">const</span> buttonStyle = {
<span class="hljs-string">'--button-bg-color'</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">props</span>.<span class="hljs-property">buttonBgColor</span>
};
<span class="hljs-keyword">return</span> (
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"field__button__group"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">{this.props.id}</span>></span>{this.props.labelText}<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">{this.props.type}</span>
<span class="hljs-attr">name</span>=<span class="hljs-string">{this.props.name}</span> <span class="hljs-attr">id</span>=<span class="hljs-string">{this.props.id}</span>
<span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.props.onChangeHandler}</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{buttonStyle}</span>></span>
{this.props.buttonText}
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
);
}
}
在上述代码中，我们添加了一个buttonStyle对象，该对象包含自定义属性的名称，并将其值设置为buttonBgColor属性的值，并为按钮添加style属性。
使用style属性可能与你所学到的关于编写 CSS 的知识相悖。CSS 的一个卖点是，我们可以定义一套样式，在多个 HTML 和 XML 文档中使用。另一方面，style 属性将 CSS 的范围限制在它所应用的元素上，导致我们不能重用它。并且也不能利用层叠的优势。
但在一个基于组件的前端架构中，一个组件可能在多种情况下被多个团队使用，甚至可能在客户端项目中共享。在这些情况下，你可能想把层叠的全局范围与style属性所提供的局部范围结合起来。
用style属性设置自定义属性值，可以将效果限制在FieldButtonGroup组件这个特定实例中。但是，由于我们使用了一个自定义属性而不是标准的 CSS 属性，我们仍然可以选择在样式表中定义--button-bg-color，而不是作为一个组件属性。
总结
自定义属性采用了预处理器的最佳功能之一 -- 变量，并使其成为 CSS 的原生功能。使用自定义属性，我们可以：
- 创建可重用的、主题化的组件
- 轻松调整内边距、外边距以及排版，以适应各种视口尺寸和媒体
- 改进 CSS 颜色值的一致性
变量有一系列的应用，在基于组件的设计系统中特别有用。我希望你现在对如何在 CSS 中使用变量或自定义属性有了更好的理解。
以上就是全部内容，如果对你有所帮助，欢迎点赞收藏转发 ~