CSS变量 -- var() 使用教程
目录
- 1 CSS变量的基本使用
- 1.1 变量定义
- 1.1 变量使用
- 1.3 全局/局部变量
- 2 CSS变量的参数
- 3 CSS变量的拼接和计算
- 3.1 拼接
- 3.2 计算
- 4 JS 修改 CSS变量
CSS 自定义属性（有时候也被称作CSS 变量或者级联变量），它的值可以在整个文档中重复使用。
复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。
1 CSS变量的基本使用
1.1 变量定义
CSS 变量名前面要加两根连词线 –
--color: #E6E6FA;
--height: 100px;
1.1 变量使用
由 var() 函数来获取值，比如：
background-color: var(--color);
height: var(--height);
CSS 变量名不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合
1.3 全局/局部变量
- 全局变量
:root
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素
在里面声明的变量，下面的所有选择器都可以拿到
注：与 scope 冲突
:root {
--color: #E6E6FA;
--height: 100px;
}
.header-container {
background-color: var(--color);
height: calc(var(--height) * 1.5);
}
- 局部变量
.header-container {
--color: #E6E6FA;
--height: 100px;
background-color: var(--color);
height: calc(var(--height) * 1.5);
}
2 CSS变量的参数
var() 函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
color: var(--foo, #7F583F);
3 CSS变量的拼接和计算
如果变量值是一个字符串，可以与其他字符串拼接；
如果变量值是数值，可以进行计算;
3.1 拼接
// 字符串
--bar: 'hello';
--foo: var(--bar)' world';
3.2 计算
:root {
--height: 100px;
}
.header-container {
height: calc(var(--height) * 1.5);
}
4 JS 修改 CSS变量
在开发过程中，有时候我们需要根据不同的条件来动态修改样式，这时候就需要使用JavaScript来实现。
具体来说，我们可以通过 JavaScript 访问元素的 documentElement.style 属性，然后使用 setProperty 方法来更改 CSS 变量的值
<button @click="changeHeight">Change Height</button>
<script setup>
const changeHeight = () => {
document.documentElement.style.setProperty('--height', '200px');
}
</script>
<style>
:root {
--height: 100px;
}
.header-container {
height: var(--height);
}
</style>