css定义变量-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40923558/article/details/144966192

在css中, 我们可以使用自定义属性(也被叫做css变量)来定义变量。这些变量可以再文档得根元素（:root 选择器）中来定义，可以再整个样式中重复使用，便于后期更改和维护

定义变量

在css中，使用 - 前缀来定义变量，变量得命名可以由字母、数字、下划线组成，但必须是字母开头，通常放在选择器规则集内或者在根元素（:root）中定义，例如：

:root {
	--textColor: red;
    --bgColor: #000;
}

使用变量

在使用变量时，需要使用var()函数将变量包裹起来。例如：

<style>
.text1{
	color: var(--textColor);
}
.text1 .textSpan{
	background: var(--bgColor);
}
</style>

<body>
    <div class="text1">这一行文本使用的是textColor变量</div>
    <div class="text1">
        <span class="textSpan">这一行本文本使用的是bgColor变量</span>
    </div>
</body>

如果变量的值需要js来修改，如下：

document.documentElement.style.setProperty('--bgColor', 'pink');

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