CSS 变量是自定义属性，允许您在整个 CSS 程序中存储和重用值。CSS 变量类似于其他编程语言中的变量。
如何在CSS中声明变量？
CSS 变量通常使用 ：root 选择器定义。以下是声明 CSS 变量的语法：
:root {
--variable-name: value;
}
要使用 CSS 变量，请遵循以下语法：
selector {
var(--variable-name, fallback-value);
}
我们可以使用 var 函数来替换任何元素上的 CSS 属性值。
CSS 不允许在媒体查询或容器查询中使用变量，也不能使用它们来设置 CSS 属性或选择器的名称。
传统方式
在这个例子中，我们将看到如何在不使用变量的情况下完成颜色和样式。在这里，您可以注意到我们重复指定属性值。
例
<html lang="en">
<head>
<style>
body {
background-color: #f0f0f0;
color: #333;
font-family: 'Arial', sans-serif;
padding: 10px;
}
header {
background-color: #0044cc;
color: #fff;
padding: 10px;
}
.container {
background-color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<div class="container">
<p>
This is a container with a background color
defined traditionally. Here we need to specify
repeating color values multiple times.
</p>
</div>
</body>
</html>
使用 CSS 变量
以下代码演示如何使用变量来避免 CSS 中的冗余。在实际应用程序中处理大型代码库时，这一点变得更加重要。
在这里您还可以看到我们将颜色“#0044cc”定义为蓝色，因此开发人员可以通过使用变量蓝色来重复使用这种颜色。
例
<html lang="en">
<head>
<style>
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-font: 'Arial', sans-serif;
--padding: 10px;
--blue: #0044cc;
--header-text: #fff;
--container-bg: #fff;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-family: var(--primary-font);
padding: var(--padding);
}
header {
background-color: var(--blue);
color: var(--header-text);
padding: var(--padding);
}
.container {
background-color: var(--container-bg);
padding: var(--padding);
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<div class="container">
<p>
This is a container with a background color
defined using variables.
</p>
</div>
</body>
</html>
根伪类
CSS 变量使用 ：root 伪类在样式表的顶部声明，该伪类与文档的根元素匹配。这意味着使用 ：root 选择器声明的 CSS 变量可以被文档中的任何元素使用。
CSS 变量名称区分大小写，这意味着 --pink-color 和 --Pink-color 是两个不同的变量。
步骤1：定义自定义属性
要使用 ：root 伪类声明变量，只需在变量名称中添加 '--' 前缀，然后设置其值。
:root {
--pink-color: pink;
--blue-color: blue;
}
步骤2：在 CSS 中使用自定义属性
然后，可以使用 var（） 函数在整个 CSS 代码中使用这些变量。
.box {
width: 400px;
height: 200px;
background-color: var(--pink-color);
color: var(--blue-color);
}
.box1, .box2 {
display: inline-block;
background-color: var(--pink-color);
width: 100px;
height: 50px;
color: var(--blue-color);
}
例
以下示例展示了如何定义我们自己的十六进制和 rgb 值的颜色阴影变化，将其存储在变量中并在以后重用。
<html>
<head>
<style>
:root {
--white-color: #f0f0f0;
--black-color: rgb(0, 0, 21);
}
.box {
text-align: center;
padding: 20px;
background-color: var(--white-color);
color: var(--black-color);
}
.box1, .box2 {
display: inline-block;
background-color: var(--black-color);
color: var(--white-color);
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<h2>Tutorialspoint</h2>
<p> How to code a website using HTML and CSS </p>
<div class="box1"> HTML </div>
<div class="box2"> CSS </div>
</div>
</body>
</html>
自定义属性的继承
您可以使用 CSS 变量来定义可由子元素继承的可重用 CSS 值。
步骤 - 1：在 ：root 选择器中声明自定义属性。
这使得变量是全局的，并且文档中的所有元素都可以访问。
:root {
--pink-color: pink;
}
步骤 - 2：使用 var（） 函数访问 CSS 中的自定义属性。
这允许您在 box 的所有子项中重用自定义属性。
.box {
--box-background: var(--pink-color);
background-color: var(--box-background);
}
步骤 - 3：使用孩子里面的颜色。
这允许您自定义特定元素的自定义属性的值。
.box1, .box2 {
background-color: var(--box-background);
}
例
以下示例演示了如何使用 CSS 自定义属性进行继承。
<html>
<head>
<style>
:root {
--white-color: #f0f0f0;
--black-color: rgb(0, 0, 21);
}
.box {
--box-background: var(--white-color);
background-color: var(--box-background);
text-align: center;
padding: 20px;
}
.box1, .box2 {
display: inline-block;
background-color: var(--black-color);
/* Box Background is defined at parent box */
color: var(--box-background);
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<h2>Tutorialspoint</h2>
<p> How to code a website using HTML and CSS </p>
<div class="box1"> HTML </div>
<div class="box2"> CSS </div>
</div>
</body>
</html>
CSS 变量回退值
您可以使用带有回退值的 CSS 变量，以确保您的 CSS 代码仍然有效并且即使未定义变量也能正常工作。
CSS 回退值不用于使 CSS 自定义属性在旧版浏览器中正常工作。它们仅在支持 CSS 自定义属性的浏览器中用作备份，以防变量未定义或值无效。
例在下面的示例中，我们只定义了白色的颜色阴影，但也使用了黑色变量。由于我们正在为黑色变量定义回退值，因此不会有任何错误。
<html>
<head>
<style>
:root {
--white-color: #f0f0f0;/* Shade for white */
/* variable for black not defined */
}
.box {
text-align: center;
padding: 20px;
background-color: var(--white-color, white);
color: var(--black-color, black);
}
.box1, .box2 {
display: inline-block;
background-color: var(--black-color, black);
color: var(--white-color, white);
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<h2>Tutorialspoint</h2>
<p> How to code a website using HTML and CSS </p>
<div class="box1"> HTML </div>
<div class="box2"> CSS </div>
</div>
</body>
</html>
CSS 变量值无效
在下面的示例中，--red-color 自定义属性定义的值为 15px。这是一个无效的值，因为红色属性只接受颜色值。
但是，浏览器将无法解析自定义属性的值，因为它无效。因此，它将简单地忽略 CSS 规则，并且第二个 h2 元素中的文本将保持相同的颜色。
例在这个例子中，即使我们使用 color 属性将 h2 的颜色设置为红色，但由于颜色无效引起的错误，使用默认颜色黑色。
<html>
<head>
<style>
:root {
/* define a invalid value for c0lor */
--red-color: 15px;
}
h2 {
/* Make color of h2 as red */
color: red;
}
h2 {
/* Use invalid color for h2, this will cause error
and default color value (black) is used */
color: var(--red-color);
}
</style>
</head>
<body>
<h2>
Tutorialspoint CSS Variables.
</h2>
</body>
</html>
Javascript 中的 CSS 变量
以下示例演示了如何使用 JavaScript 全局和本地设置 CSS 变量。
例
<html>
<head>
<style>
.box {
text-align: center;
padding: var(--padding);
background-color: var(--white-color);
color: var(--black-color);
}
.box1, .box2 {
display: inline-block;
background-color: var(--black-color);
color: var(--white-color);
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
<h2>Tutorialspoint</h2>
<p>How to code a website using HTML and CSS</p>
<div class="box1">HTML</div>
<div class="box2">CSS</div>
</div>
<script>
const root = document.documentElement;
const boxElement = document.querySelector('.box');
// Define a global variable
root.style.setProperty('--padding', '20px');
// Define variables specific to the box element
boxElement.style.setProperty('--white-color', '#f0f0f0');
boxElement.style.setProperty('--black-color', 'rgb(0, 0, 21)');
</script>
</body>
</html>
