CSS 变量

CSS 变量也叫自定义属性，允许你将一些可复用的 CSS 值定义成变量，以便在以后进行复用。CSS 变量极大的方便了重复内容的修改，也更容易制作主题。

定义变量

定义一个 CSS 变量，变量名需要以两个减号（--）开始，变量值可以是任何有效的 CSS 值。变量和其他属性一样，写在选择器的规则内。比如：

body {
  --main-color: gray;
}

上面定义了一个变量 --main-color 代表网页整体的主色。

CSS 变量是有作用域的，有效范围就是所在的选择器的范围。为了使变量在所有的选择器可用，我们可以将变量定义在根伪类 :root 中。

:root {
  --main-color: gray;
}

!! CSS 变量是是区分大小写的，--Main-Color 和 --main-color 是两个不同的变量。

`var()` 函数

var() 函数用于读取变量的值。var() 函数的语法如下：

var(变量名, 默认值)

var() 函数可以接受 2 个参数，第 1 个参数数是变量名，第 2 个参数是是可选的，表示默认值，在找不到变量的适合，会返回默认值。

p {
  color: var(--main-color, #000000);
}

如果 --main-color 不存在，则 var(--main-color, #000000) 的返回值是 #000000 。

CSS 变量实例

以下我们将把一段不使用 CSS 变量的代码使用 CSS 变量进行改写，来体会 CSS 变量带来的好处。

我们以传统方法定义一些 CSS 样式如下：

body {
  background-color: #1e90ff;
}

h2 {
  border-bottom: 2px solid #1e90ff;
}

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

首先，我们声明两个全局变量：--blue 和 --white；然后，我们使用 var() 函数在样式表中插入变量的值：

: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;
}

至此，我们看出使用 var() 的优点是：

使代码更易于阅读（更易于理解）
使更改颜色值变得更加容易

如果要将蓝色和白色更改为更柔和的蓝色和白色，您只需更改两个变量值：

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}

用局部变量覆盖全局变量

从上一页我们了解到全局变量可以在整个文档中访问/使用，而局部变量只能在声明它的选择器内部使用。

有时我们希望变量只在页面的特定部分发生变化。

假设我们希望按钮元素使用不同颜色的蓝色。我们可以在 button 选择器中重新声明 --blue 变量。当我们在这个选择器中使用 var(--blue) 时，会返回局部 --blue 变量值。

我们看到局部 --blue 变量覆盖了全局的 --blue 变量：

: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 {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

添加新的局部变量

如果一个变量只在一个地方使用，我们也可以声明一个新的局部变量，如下所示：

: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 {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

使用 JavaScript 操作 CSS 变量

使用 JavaScript 可以情动的添加和读取 CSS 变量。

<script>
  // 获取根元素
  var r = document.querySelector(":root");

  // 读取变量函数
  function myFunction_get() {
    // 获取跟元素的样式
    var rs = getComputedStyle(r);
    // 提示 --blue 变量的值
    alert("The value of --blue is: " + rs.getPropertyValue("--blue"));
  }

  // 设置变量的函数
  function myFunction_set() {
    // 设置 --blue 变量的值
    r.style.setProperty("--blue", "lightblue");
  }
</script>

在媒体查询中使用变量

现在我们要更改媒体查询中的变量值。

提示： 媒体查询是关于为不同的设备（屏幕、平板电脑、手机等）定义不同的样式规则。可以在媒体查询章节中了解更多信息。

在这里，我们首先为 .container 类声明一个局部变量 --fontsize，赋值为 25 像素，并在 .container 中使用它。然后，我们创建一条 @media 规则：“当浏览器的宽度为 450px 或更宽时，将 .container 类的 --fontsize 变量值更改为 50px。”

这是完整的示例：

/* 定义变量变量 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

.container {
  --fontsize: 25px;
}

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

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

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

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}

浏览器兼容性处理

对于不支持 CSS 变量的浏览器，可以采用下面的写法。

a {
  color: #7f583f;
  color: var(--primary);
}

也可以使用 @support 命令进行检测。

/* 支持 CSS 变量 */
@supports ((--a: 0)) {
  /* 你的样式规则 */
}

/* 不支持 CSS 变量 */
@supports (not (--a: 0)) {
  /* 你的样式规则 */
}

浏览器支持

下表列出了完全支持的第一个浏览器版本。

属性	IE	Chrome	Firefox	Safari	Opera
`var()`	49.0	15.0	31.0	9.1	36.0