CSS 变量（也称为自定义属性）是一种现代 CSS 规范，由于浏览器的广泛支持，它越来越突出。它减少了编码和维护时间，并允许您开发跨浏览器兼容的网站。
我们将探索什么是CSS变量以及如何在CSS中使用变量来创建漂亮的响应式网站。
What Are CSS Variables? 什么是CSS 变量
CSS 变量是自定义属性，您可以在其中存储值并在 HTML 代码中的任何位置使用它。
CSS 变量的初始化是通过在变量名称前面加上“–”来完成的。例如，以下语法将变量“my_font”初始化为 20px。
--my_font: 20px;
“my_font”变量现在可以在代码中的任何位置使用，值为“20px”。
1
font-size: var(--my_font, 20px);
默认值在不同方面的工作方式不同。我们将在本文后面讨论这一点，并提供一些与 Web 浏览器相关的有趣插图。
CSS变量的作用
在我们继续了解如何在 CSS 中使用变量之前，让我们探讨一下在 CSS 中使用变量的一些好处。作为Web开发人员，您将能够与之相关，并回顾使用它们您的生活将如何更轻松。
1. 减少冗余代码
CSS 中的变量消除了系统中的这种冗余，我们只需要更改一次颜色 - 在变量的值中。
超级灵活，可以在任何位置定义变量
CSS 变量是 CSS 的自定义属性。与其他自定义属性类似，您可以在任何位置使用 CSS 中的变量。以下是将其与样式标签一起使用的 ：
<style>
h2 {
color: var(--heading_color, black);
}
</style>
内联使用它可能是另一种选择：
Calc 和CSS 变量
font-size: calc(20 * 2.5)px;
1
2
3
4
5
:root {
--paragraph_size: 20px;
}
h2 {
font-size: calc(var(--paragraph_size) * 2.5);
CSS 变量的作用域
全局变量
:root {
--my_variable: <value>
}
:root {
--my_variable: <value>;
}
div {
<property>: var(--my_variable, fallback)
}
局部变量
div {
width: 300px;
height: 200px;
color: white;
font-weight: bold;
font-size: 30px;
}
#first_div {
--my_bg: #692a3c;
background-color: var(--my_bg, black);
}
<div id = "first_div">I am a div</div>
CSS 变量默认值
当没有设置变量时，var 可以设置默认值
<style>
:root {
--my_bg : #9e2e50;
}
div {
width: 300px;
height: 200px;
color: black;
font-weight: bold;
font-size: 30px;
background-color: var(--my_bg, black);
}
</style>
</head>
<body>
<center>
<div>
I am a div box!!
</div>
</center>
</body>
设置两层var值时
当第二个值没有设置正确时，将会使用之一个设置的background-color
<style>
:root {
--my_bg : #9e2e50;
}
div {
background-color: #9e2e50;
background-color: var(--my_bg, black);
}
</style>
1
background-color: var(variable_name, var(variable_name, fallback));
CSS 变量异常处理
循环依赖：
--variable_name_1 : var(variable_name_2, fallback);
--variable_name_2 : var(variable_name_1, fallback);
自身依赖
--variable_1 = var(variable_1, fallback);
CSS 变量是大小写敏感
CSS 变量不能是属性名
如不能是“font-size.
Javascrip 中使用CSS Variables
通过js 来调整字体大小
<style>
:root {
--fontSize: 20px;
}
div {
font-size: var(--fontSize, 12px);
background-color: #9e2e50;
}
</style>
<script>
function changeFontSize() {
var r = document.querySelector(':root');
var rs = getComputedStyle(r);
r.style.setProperty('--fontSize', '40px');
}
</script>
</head>
<body>
<center>
<div>
I am a div box!!
</div>
<br><br>
<button onclick="changeFontSize()">Change Font Size</button>
</center>
</body>
浏览器兼容情况
