跳到主要内容

CSS：变量函数var和自定义属性

· 阅读需 3 分钟

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函数调用对应的数值即可。