CSS 变量 - var() 函数

目录

    显示目录

CSS 变量

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

CSS 变量可以访问 DOM，这意味着您可以创建 具有本地或全局作用域的变量，使用 JavaScript 更改变量，以及 根据媒体查询更改变量。

使用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;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

var() 函数的语法

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

var() 函数的语法如下：

 var(--name, value)
name

必需的。变量名（必须以两个开头 破折号）

value

选修的。后备值（如果未找到变量则使用）

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

var() 的工作原理

首先：CSS 变量可以具有全局或局部范围。

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

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

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

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

首先，我们声明两个全局变量（--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;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

使用 var() 的优点是：

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

  • 使更改颜色值变得更加容易

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

例子

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

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

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #6495ed;
  --white: #faf0e6; 
}

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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

浏览器支持

表中的数字指定第一个完全支持的浏览器版本 var() 函数。

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 函数

var()

插入 CSS 变量的值