CSS变量 -- var() 使用教程

发布于:2024-05-30 ⋅ 阅读:(133) ⋅ 点赞:(0)

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>