CSS 变量

CSS 变量

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

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

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

传统方式

以下例子显示了在样式表中定义一些颜色的传统方式（通过为每个特定元素定义要使用的颜色）：

实例

  1. body { background-color: #1e90ff; }
  3. h2 { border-bottom: 2px solid #1e90ff; }
  5. .container {
  6.   color: #1e90ff;
  7.   background-color: #ffffff;
  8.   padding: 15px;
  9. }
  11. button {
  12.   background-color: #ffffff;
  13.   color: #1e90ff;
  14.   border: 1px solid #1e90ff;
  15.   padding: 5px;
  16. }

css3_var_old.htm

var() 函数的语法

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

var() 函数的语法如下：

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

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

var() 如何工作

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

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

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

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

下面的例子与上面的例子相同，但是在这里我们使用 var() 函数。

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

实例

  1. :root {
  2.   --blue: #1e90ff;
  3.   --white: #ffffff;
  4. }
  6. body { background-color: var(--blue); }
  8. h2 { border-bottom: 2px solid var(--blue); }
  10. .container {
  11.   color: var(--blue);
  12.   background-color: var(--white);
  13.   padding: 15px;
  14. }
  16. button {
  17.   background-color: var(--white);
  18.   color: var(--blue);
  19.   border: 1px solid var(--blue);
  20.   padding: 5px;
  21. }

css3_var_1.htm

使用 var() 有如下优势：

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

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

实例

  1. :root {
  2.   --blue: #6495ed;
  3.   --white: #faf0e6;
  4. }
  6. body { background-color: var(--blue); }
  8. h2 { border-bottom: 2px solid var(--blue); }
  10. .container {
  11.   color: var(--blue);
  12.   background-color: var(--white);
  13.   padding: 15px;
  14. }
  16. button {
  17.   background-color: var(--white);
  18.   color: var(--blue);
  19.   border: 1px solid var(--blue);
  20.   padding: 5px;
  21. }

css3_var_2.htm

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

函数 Chrome Internet Explorer_Edge Firefox Safari Opera
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 函数

函数 描述
var() 插入 CSS 变量的值。