前言
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）只反对逗号分隔的参数。 */ --brand-primary: hsl( var( --brand-hue ) 100% 50% ); --brand-highlight: hsl( var( --brand-hue ) 100% 75% ); --brand-lowlight: hsl( var( --brand-hue ) 100% 25% ); --brand-inactive: hsl( var( --brand-hue ) 50% 50% ); --brand-secondary: hsl( var( --brand-hue-alt ) 100% 50% ); --brand-2nd-highlight: hsl( var( --brand-hue-alt ) 100% 75% ); --brand-2nd-lowlight: hsl( var( --brand-hue-alt ) 100% 25% ); --brand-2nd-inactive: hsl( var( --brand-hue-alt ) 50% 50% );}下面的CSS提供了上面所示的调色板。
这是一个繁难版本，但你也能够应用自定义属性来调整饱和度和亮度值。
健全的调色板生成
另一个想法是联合自定义属性和calc()函数，从一个根本色调中生成一个方形的配色计划。让咱们在上面的例子中创立一个方形配色计划。一个方形配色计划由四种色彩组成，这些色彩在色轮上彼此等距，也就是相距90度：
:root { --base-hue: 310deg; /* Hot pink */ --distance: 90deg; --color-a: hsl( var(--base-hue), 100%, 50% ); --color-b: hsl( calc( var(--base-hue) + var( --distance ) ), 100%, 50% ); --color-c: hsl( calc( var(--base-hue) + ( var( --distance ) * 2 ) ), 100%, 50% ); --color-d: hsl( calc( var(--base-hue) + ( var( --distance ) * 3 ) ), 100%, 50% );}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');// 如果浏览器反对自定义属性，则打印trueconsole.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. */ const buttonStyle = { '--button-bg-color': this.props.buttonBgColor }; 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" style={buttonStyle}> {this.props.buttonText} </button> </div> </div> ); }}在上述代码中，咱们增加了一个buttonStyle对象，该对象蕴含自定义属性的名称，并将其值设置为buttonBgColor属性的值，并为按钮增加style属性。
应用style属性可能与你所学到的对于编写CSS的常识相悖。CSS的一个卖点是，咱们能够定义一套款式，在多个HTML和XML文档中应用。另一方面，style属性将CSS的范畴限度在它所利用的元素上，导致咱们不能重用它。并且也不能利用层叠的劣势。
但在一个基于组件的前端架构中，一个组件可能在多种状况下被多个团队应用，甚至可能在客户端我的项目中共享。在这些状况下，你可能想把层叠的全局范畴与style属性所提供的部分范畴联合起来。
用style属性设置自定义属性值，能够将成果限度在FieldButtonGroup组件这个特定实例中。然而，因为咱们应用了一个自定义属性而不是规范的CSS属性，咱们依然能够抉择在样式表中定义--button-bg-color，而不是作为一个组件属性。
总结
自定义属性采纳了预处理器的最佳性能之一--变量，并使其成为CSS的原生性能。应用自定义属性，咱们能够：
- 创立可重用的、主题化的组件
- 轻松调整内边距、外边距以及排版，以适应各种视口尺寸和媒体
- 改良CSS色彩值的一致性
变量有一系列的利用，在基于组件的设计零碎中特地有用。我心愿你当初对如何在CSS中应用变量或自定义属性有了更好的了解。
以上就是全部内容，如果对你有所帮忙，欢送点赞珍藏转发~