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

文章目录

- CSS变量
- var()函数

CSS变量

CSS变量分为两部分：变量声明和变量使用。
变量的声明是由CSS自定义属性和对应的属性朱组成的，比如：

        :root {
            --custom-color: deepskyblue;
        }
1
2
3

在这段代码中，–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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

对应效果如图：
在这里插入图片描述
虽然是可以这样写，但是不建议，因为这样的写法，会导致代码混乱，可读性差，不利于维护。

CSS自定义属性也可以在JavaScript中定义，直接修改上面的代码：

    <div id="box" >
        <p style="border: 10px solid var(--color);">5555p>
    div>
1
2
3

JavaScript：

    <script>
        var box = document.getElementById("box")
        box.style.setProperty('--color', 'deepskyblue');
    script>
1
2
3
4

效果如上图所示。

如果仅仅是设置样式，那么也不建议这样写。样式代码和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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果如图：
在这里插入图片描述

在一个应用中和使用大量相同的属性值，比如相同的颜色。这样我们就可以把相同的属性值，设置在自定义属性中，然后在对应的模块中直接通过var函数调用对应的数值即可。

相关阅读:
Cadence OrCAD Capture 原理图中创建差分对约束的两种常用方法
千亿流量并发治理！Alibaba实战Sentinel笔记，为微服务保驾护航
PostgreSQL源码分析——常量表达式化简
java中compareTo比较两个日期大小
python 中的下划线_ 是啥意思
如何使用SHC对Shell脚本进行封装和源码隐藏
Java的基础框架之SpringMvc第二讲(SSM框架整合和拦截器)
【Verilog教程】2.5编译指令
2019年亚太杯APMCM数学建模大赛A题基于图像分析的二氧化硅熔化表示模型求解全过程文档及程序
杂记:数据库go,begin,end,for,after,instead of

原文地址：https://blog.csdn.net/xuelian3015/article/details/127617643