CSS 变量

发表于 更新于 分类于

CSS 变量（CSS variable）又叫做”CSS 自定义属性”（CSS custom properties），可以通过 JS 动态改变。

  • var() 函数用于插入 CSS 变量的值。

  • CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

  • 使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

var() 函数的语法

var() 函数用于插入 CSS 变量的值。

var() 函数的语法如下：

var(name, value)

值描述
name必需。变量名（以两条破折号开头）。
value可选。回退值（在未找到变量时使用）。

注释：变量名称必须以两个破折号（–）开头，且区分大小写！

如何工作

首先：CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

  • 如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

  • 如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

优势

  • 使代码更易于阅读（更容易理解）

  • 使修改颜色值更加容易

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="variable" :style="{ '--colorFu': colorFu, '--colorTop': colorTop }" />
</template>

<script>
  export default {
    data() {
      return {
        colorFu: "",
        colorTop: ""
      };
    }
  };
</script>

<style lang="scss" scoped>
  .variable {
    color: var(--colorFu);
    background-color: var(--colorTop);
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}