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