CSS 变量

学习目标

理解 CSS 变量（自定义属性）的核心概念及其在现代 Web 开发中的作用
掌握 CSS 变量的定义语法（--variable-name）与使用方法（var()）
学会利用 :root 选择器管理全局主题，实现一键换肤
了解 CSS 变量的级联特性，能够灵活地在局部作用域中覆盖变量值

正文内容

什么是变量

CSS 变量，官方称为自定义属性，是一种允许开发者将特定的值（如颜色、字体大小、间距等）存储在命名变量中的机制。这些变量可以在整个样式表中重复使用，极大地提高了代码的效率和维护性。

核心优势包括：

集中管理：将颜色、尺寸或字体等值统一存储在一个地方，修改一处即可全局更新。
复用性强：通过 var() 函数在 CSS 的任何位置调用这些变量。
提升可读性：使用语义化的变量名代替魔术数字或十六进制颜色码，使样式表更易于理解和维护。

定义和使用 CSS 变量的语法非常直观：

/* 定义变量 */
--custom-name: value;

/* 使用变量 */
property: var(--custom-name, fallback-value);

参数说明：

--custom-name（必填）：自定义属性的名称，必须以两个连字符（--）开头。
fallback-value（可选）：后备值。当自定义属性未定义或无效时，浏览器将使用此值。

基础示例：全局主题设置

最常見的用法是在 :root 伪类中定义全局变量。:root 选择器匹配文档的根元素（在 HTML 中通常是 <html>），在此处定义的变量具有最高的可用性，可以被文档中的所有元素访问。

以下示例展示了如何定义背景色和文字颜色变量，并应用到页面中：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 在 :root 中定义全局变量 */
        :root {
            --main-bg-color: lightblue;
            --main-text-color: darkblue;
        }

        body {
            /* 使用 var() 函数调用变量 */
            background-color: var(--main-bg-color);
            color: var(--main-text-color);
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个演示 CSS 变量用法的示例段落。</p>
</body>
</html>

代码解析：
在这个例子中，我们将主背景色和主文字颜色定义为变量。如果需要将网站从“蓝色主题”切换到“深色主题”，只需修改 :root 中的两个变量值，无需逐个查找并替换每个元素的颜色属性。

应用场景

1. 基于变量的主题按钮

通过 CSS 变量，我们可以轻松创建可复用的组件样式。当需要调整组件的主题色时，只需修改变量定义，所有使用该变量的组件都会自动更新。

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            /* 定义按钮相关的变量 */
            --button-bg: #4CAF50;
            --button-text: white;
            --button-padding: 10px 20px;
        }

        .btn {
            /* 应用变量 */
            background-color: var(--button-bg);
            color: var(--button-text);
            padding: var(--button-padding);
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        /* 悬停状态直接修改颜色，不依赖变量，或者也可以定义 --button-hover-bg */
        .btn:hover {
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <button class="btn">点击我</button>
</body>
</html>

场景分析：

:root 中定义了按钮的背景色 --button-bg、文字颜色 --button-text 和内边距 --button-padding。
.btn 类通过 var() 函数引用这些变量。
优势：如果设计师决定将品牌色从绿色改为蓝色，开发者只需更改 :root 中的 --button-bg 值，页面上所有带有 .btn 类的按钮都会立即生效，无需手动修改每个按钮的样式。

2. 动态间距管理

在大型项目中，保持间距（Margin、Padding）的一致性至关重要。使用变量可以确保全站间距标准的统一。

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            /* 定义统一的间距标准 */
            --spacing: 20px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            /* 使用变量控制外边距 */
            margin: var(--spacing);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>