css var()

1. 概述

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页样式的语言。在CSS中，通过一系列的选择器和属性来定义元素的显示效果。而CSS变量（Custom Properties）是CSS3中的一项新功能，引入了一种全新的定义和使用变量的方式。

CSS变量是一种定义在CSS样式规则中的变量，可以在整个页面或特定的元素中进行重复使用。变量可以用于存储颜色、尺寸、字体等各种样式值，并且可以在CSS样式规则中进行动态调整。

2. 定义CSS变量

CSS变量通过使用--前缀来定义，定义的语法格式为：

--variable-name: value;

其中，--variable-name是变量名，可以由字母、数字、破折号和下划线组成，但不能以数字打头。value是变量的值，可以是任何有效的CSS样式值。

下面是一个示例，定义了一个名为primary-color的变量，值为蓝色：

:root {
  --primary-color: blue;
}

在上述示例中，:root选择器表示根元素，可以将此变量应用于整个页面。

3. 使用CSS变量

在使用CSS变量时，需要使用var()函数将变量引入到具体的样式中。

selector {
  property: var(--variable-name);
}

其中，selector是元素的选择器，property是样式属性，--variable-name是要使用的CSS变量。

下面是一个示例，将上述定义的primary-color变量应用于color属性：

h1 {
  color: var(--primary-color);
}

在上述示例中，h1元素的文本颜色将变为蓝色。

4. CSS变量的作用域

CSS变量可以在不同的作用域中定义和使用。

4.1 全局作用域

全局作用域中定义的变量可以在整个页面中使用。在前面的示例中，使用:root选择器将变量定义在全局作用域中。

4.2 局部作用域

局部作用域中定义的变量只能在特定的元素或选择器范围内使用。

下面是一个示例，定义了一个名为background-color的局部变量，值为灰色，并在.container选择器的范围内使用该变量：

.container {
  --background-color: gray;
  background-color: var(--background-color);
}

在上述示例中，.container元素的背景颜色将变为灰色。

5. 修改CSS变量的值

CSS变量定义后可以动态修改其值。

5.1 使用JavaScript修改变量值

使用JavaScript可以直接修改CSS变量的值。

document.documentElement.style.setProperty('--variable-name', 'new-value');

其中，--variable-name是要修改的CSS变量，new-value是新的变量值。

5.2 使用@media查询修改变量值

CSS变量也可以根据不同的视口尺寸使用不同的值，在响应式布局中非常有用。

@media (max-width: 768px) {
  :root {
    --primary-color: red;
  }
}

在上述示例中，当视口宽度小于等于768px时，将primary-color变量的值修改为红色。

6. CSS变量的优势

CSS变量具有以下优势：

可重用性：定义一次变量，可以在整个页面或特定范围内进行重复使用，减少代码冗余。
动态调整：修改变量的值可以实现样式的动态调整，提升用户体验。
响应式布局：使用CSS变量可以根据不同的视口尺寸设置不同的样式值，实现响应式布局。

7. 浏览器支持情况

CSS变量在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari、Edge等。在兼容性方面，IE浏览器旧版不支持CSS变量，但可以通过JavaScript进行降级处理。

8. 示例代码运行结果

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: blue;
    }

    h1 {
      color: var(--primary-color);
    }

    .container {
      --background-color: gray;
      background-color: var(--background-color);
    }
  </style>
</head>
<body>
  <h1>Hello, CSS variables!</h1>
  <div class="container">
    <p>This is a container with a gray background.</p>
  </div>

  <script>
    // 修改CSS变量的值
    document.documentElement.style.setProperty('--primary-color', 'green');
    document.documentElement.style.setProperty('--background-color', 'yellow');
  </script>
</body>
</html>