文章目录
- CSS变量
- var()函数
CSS变量
CSS变量分为两部分：变量声明和变量使用。
变量的声明是由CSS自定义属性和对应的属性朱组成的，比如：
:root {
--custom-color: deepskyblue;
}
在这段代码中，–custom-color是属于css的自定义属性名，deepskyblue是属性值。css自定义属性的命名限制比较少，但是也不能出现$、[、]、^、(、)、%等等特殊字符。
var()函数
var函数是使用我们自定义的属性，语法为：var(属性名)。
CSS自定义的属性，可以在html标签内设置，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
<style>
</style>
</head>
<body>
<div style="--color: deepskyblue;">
<p style="border: 10px solid var(--color);">5555</p>
</div>
</body>
</html>
对应效果如图：
虽然是可以这样写，但是不建议，因为这样的写法，会导致代码混乱，可读性差，不利于维护。
CSS自定义属性也可以在JavaScript中定义，直接修改上面的代码：
<div id="box" >
<p style="border: 10px solid var(--color);">5555</p>
</div>
JavaScript：
<script>
var box = document.getElementById("box")
box.style.setProperty('--color', 'deepskyblue');
</script>
效果如上图所示。
如果仅仅是设置样式，那么也不建议这样写。样式代码和JavaScript代码最好是分开，这样利于维护。
如果我们自定义的属性值，需要能够作为字符串展示在页面中，那该怎么写呢？
这就需要借助CSS的计数器来呈现自定义属性值了，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
<style>
:root {
--percent: 23;
}
#box::before{
counter-reset: progress var(--percent);
content: counter(progress);
}
</style>
</head>
<body>
<div id="box">
<p>5555</p>
</div>
</body>
</html>
效果如图：
在一个应用中和使用大量相同的属性值，比如相同的颜色。这样我们就可以把相同的属性值，设置在自定义属性中，然后在对应的模块中直接通过var函数调用对应的数值即可。
