资源

是什么

CSS自定义属性、CSS变量、级联变量，可以文档中重复使用的样式变量

声明

  • 声明一个自定义属性，属性名需要以两个减号（–）开始
  • 大小写敏感
  • 属性值则可以是任何有效的CSS值。
  • 和其他属性一样，自定义属性也是写在规则集之内的

  • 例子🌰：

    1
    2
    3
    element {
      --main-bg-color: brown;
    }

  • 规则集所指定的选择器 定义了自定义属性的可见作用域

  • 自定义属性具有继承性，受级联的约束，从其父级继承其值。

  • 最佳实践💁‍♀️：根伪类:root，相当于全局变量

    1
    2
    3
    :root {
      --main-bg-color: brown;
    }

使用变量

color: var(--main-color);

备用值 / 默认值

1
2
3
4
5
6
// 正确做法
var(--my-var, red)
var(--my-var, var(--my-background, pink))

// 错误做法
var(--my-var, --my-background, pink)

js更新变量

1
2
3
4
5
6
7
8
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", newValue);

Vue3 响应式css变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>