CSS的var函数怎么使用自定义属性？
CSS自定义属性（通常被称为CSS变量）是现代CSS中非常强大的特性之一。通过var()函数，我们可以轻松地复用属性值，极大地提升了代码的可维护性、可读性和灵活性。本文将详细介绍如何定义和使用CSS自定义属性及var()函数。
一、什么是自定义属性？
自定义属性由开发者自己定义，它们以两个连字符（--）开头。与传统的CSS属性（如color、margin）不同，自定义属性本身不会直接产生任何样式效果，它们只是用来存储数据的“容器”。
:root {
--main-color: #3498db;
--font-size: 16px;
}在上面的代码中，我们在:root伪类（代表文档的根元素，通常是<html>）中定义了两个自定义属性：--main-color和--font-size。将变量定义在:root中可以使其成为全局变量，在整个文档中都可以访问。
二、使用 var() 函数读取自定义属性
var()函数用于读取自定义属性的值，并将其应用到CSS样式中。其基本语法如下：
var(--custom-property-name, fallback-value)
--custom-property-name：必需参数，自定义属性的名称（如
--main-color）。fallback-value：可选参数，当自定义属性无效或未定义时使用的备用值。
基本使用示例：
.button {
background-color: var(--main-color);
font-size: var(--font-size);
color: #ffffff;
}此时，.button的背景色将被解析为#3498db，字体大小将被解析为16px。
三、设置备用值（Fallback）
在某些情况下，你调用的自定义属性可能没有被定义，或者值无效。为了防止样式崩溃，可以为var()提供第二个参数作为备用值。
.text {
/* 如果 --text-color 未定义，则使用 #333333 */
color: var(--text-color, #333333);
/* 备用值也可以包含另一个 var() 函数 */
background-color: var(--bg-color, var(--main-color, #ffffff));
}四、作用域与继承
CSS自定义属性遵循CSS的层叠和继承规则。你可以在特定的选择器中重新定义自定义属性，从而实现局部样式的覆盖。
:root {
--bg-color: white;
--text-color: black;
}
.dark-theme {
--bg-color: #2c3e50;
--text-color: #ecf0f1;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}当<body>或其子元素添加了dark-theme类名时，--bg-color和--text-color的值会被局部覆盖，页面背景和文字颜色随之改变。
五、结合 calc() 函数进行计算
var()函数经常与calc()函数结合使用，以实现动态的尺寸计算。
:root {
--base-spacing: 10px;
}
.container {
/* 上下边距为 10px，左右边距为 20px */
padding: var(--base-spacing) calc(var(--base-spacing) * 2);
}六、实战案例：主题切换
自定义属性最常见的应用场景之一就是实现网站的主题切换（如深色/浅色模式）。下面是一个完整的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--primary-bg: #f8f9fa;
--primary-text: #212529;
--btn-bg: #007bff;
}
.dark-theme {
--primary-bg: #212529;
--primary-text: #f8f9fa;
--btn-bg: #1abc9c;
}
body {
background-color: var(--primary-bg);
color: var(--primary-text);
transition: all 0.3s ease;
padding: 20px;
font-family: sans-serif;
}
.action-btn {
background-color: var(--btn-bg);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>欢迎访问 www.ipipp.com 学习前端知识</h2>
<p>点击下方按钮切换页面主题颜色。</p>
<button class="action-btn">切换主题</button>
<script>
function toggleTheme() {
document.body.classList.toggle('dark-theme');
}
</script>
</body>
</html>总结
CSS的var()函数与自定义属性为我们提供了一种原生的、无需预处理器（如Sass/Less）即可实现变量功能的方式。它们不仅减少了代码重复，还让代码的维护和主题定制变得异常简单。掌握var()的使用，是迈向现代CSS开发的重要一步。