CSS 自定义变量

自定义变量的声明

声明自定义变量要以两个减号(--)开头，属性值可以是任何有效的css值

css变量的声明有两种方式

1. 在:root声明

:root这个CSS伪类表示的是文档树的根元素，也就是<html>元素。

在:root中声明的变量，可以在当前文档树下的任意位置使用

<body>
    <div>
        <p >css variable declaration</p>
    </div>
</body>
</html>

<style>
    :root {
        --color: rgb(255, 0,0) /* 声明变量--color */
    }
</style>

2. 在元素中声明

<body>
    <div>
        <p >css variable declaration</p>
    </div>
</body>
</html>

<style>
    p {
        --color: rgb(255, 0,0) /* 声明变量--color */
    }
</style>

css 变量的使用

上面我们说明了css变量如何定义，现在我们来看下css变量如何使用。

css变量的使用需要借助var函数

在:root中定义，在元素中使用

<body>
    <div>
        <p >css variable declaration</p>
    </div>
</body>
</html>

<style>
    :root {
        --color: rgb(255, 0,0) /* 声明变量--color */
    }
		p {
			color: var(--color)
		}
</style>

在元素中定义，在当前元素及子元素中使用

<body>
    <div>
        <p >css variable declaration</p>
    </div>
</body>
</html>

<style>
    div {
        --color: rgb(255, 0,0) /* 声明变量--color */
    }
		p {
			color: var(--color)
		}
</style>

如果你想要在某个元素内使用自定义变量，切记一定要在当前元素或父级元素或者:root元素中声明，在子元素中声明，父元素中使用是不生效的

自定义属性的继承性

自定义属性能继承吗？和正常的css的样式一样吗？

答案是肯定的，自定义属性也会继承

<div>
    <span>
        <p class="p1">css variable declaration</p>
        <p class="p2">css variable declaration2</p>
        123
    </span> 
</div>
<style>
    div {
        --color: rgb(255, 0, 0)
    }
    span {
        --text: 20px;
        --color: rgb(0, 255, 0);
        color: var(--color);
        font-size: var(--text);
    }
    p {
        --color: rgb(0, 0, 255);
        color: var(--color);
    }

    .p1 {
        --text: 2em;
        font-size: var(--text);
    }
</style>

上面的代码会导致p1是40px,p2还是继承了span的font-size: 20px ; 文字123也是20px；

由此可见，自定义属性是可以被继承的

自定义属性的备用值

不知道大家有没有考虑过这么一种场景，如果我们只是单纯的使用了一个自定义变量，而没有去定义它(或者它的值并不是正常的css属性值)，这时候会有什么现象呢

<body>
    <div>未定义css变量</div>
</body>
</html>

<style>
    div {
        color: var(--color);
    }
</style>

我们可以看到并没有什么报错，文字的颜色使用了默认值黑色。但是这种如果在日常开发时，QA肯定会给你提一个bug的，所以有没有什么方法能兜底下呢？

这时候我们就得详细介绍下var函数 了

`var()`

var函数接收两个参数，第一个参数是自定义属性名称，第二个参数表示备用值 。当自定义属性值无效时，第二个参数就可以派上用场了

p {
  color: var(--my-color, red);  /* --my-color如果无效，那么p的颜色就是red */
}
/* 如果--my-var无效，那么就是--my-background的值，如果--my-background也无效，那么就是粉色 */
.span {
  background-color: var(
    --my-var,
    var(--my-background, ..., pink)
  ); 

}

ps: 第二种写法可能会导致性能问题，因为需要花费时间处理多个变量

自定义属性对无效值的处理

在上面，我们对color使用了一个没有定义的自定义变量，这时候div的颜色变成了黑色，其实浏览器针对无效的自定义变量有一套处理流程，具体表现如下

检查是否为继承属性，如果是，则找父元素是否定义了该属性，有的话，则使用，没有的话进入第二步
将该属性的值设为默认值

总结

以上就是我对css自定义变量的一些理解，如果有啥理解不到位的地方，欢迎指正~

2024了，我才了解css自定义变量