Skip to content
全栈开发

CSS 变量详解

CSS 变量，官方称为 CSS 自定义属性（CSS Custom Properties for Cascading Variables），是现代 Web 开发中一项强大的特性。它允许开发者在 CSS 文件中定义可重用的值，极大地增强了样式表的可维护性、灵活性和动态性，正在逐步改变前端开发者编写和组织 CSS 的方式。

什么是CSS变量?

CSS 变量本质上是开发者自定义的 CSS 属性，其名称以两个连字符 -- 开头，后面跟着变量名，例如 --main-color。这些自定义属性可以被赋予一个值，然后在 CSS 的其他地方通过 var() 函数来引用这个值。与 Sass 或 Less 等 CSS 预处理器中的变量不同，CSS 变量是浏览器原生支持的，它们存在于 DOM 中，并且可以在运行时被读取和修改，这赋予了它们独特的动态能力。

声明与使用CSS变量

声明 CSS 变量通常在需要该变量生效的作用域对应的选择器内进行。最常见的做法是在 :root 伪类中声明全局变量，这样变量就可以在整个 HTML 文档中被访问。声明语法非常直观，即 --variable-name: value;。例如，可以在 :root 中定义一个主色调和默认字体大小：

:root {
  --primary-color: #007bff;
  --base-font-size: 16px;
}

使用已声明的 CSS 变量需要借助 var() 函数。该函数接收一个参数，即要引用的变量名。例如，要将一个段落的颜色设置为之前定义的 --primary-color，可以这样写：

p {
  color: var(--primary-color);
  font-size: var(--base-font-size);
}

var() 函数还接受第二个可选参数，作为备用值（fallback value）。当第一个参数指定的变量未定义时，浏览器会使用这个备用值。这增强了代码的健壮性，例如当引用的变量 --button-bg 不存在时，背景色会回退到 blue。

button {
  background-color: var(--button-bg, blue); /* 如果 --button-bg 未定义，则使用 blue */
}

CSS变量的作用域

CSS 变量遵循标准的 CSS 级联规则，这意味着它们具有作用域的概念，并且可以被继承。在 :root 伪类（通常对应 <html> 元素）中声明的变量拥有全局作用域，可以在文档的任何元素上使用。如果在特定的元素选择器（如类、ID 或标签选择器）中声明变量，那么该变量则具有局部作用域，仅在该元素及其后代元素中可用。如果后代元素重新定义了同名变量，则局部定义会覆盖继承的值。这种作用域机制使得变量管理更加灵活和精确。

graph TD
    A[":root <br> --global-bg: lightgray; <br> --text-color: black;"] --> B["body <br> background-color: var(--global-bg);"];
    A --> C[".container <br> --text-color: darkblue;"];
    B --> C;
    C --> D["p in .container <br> color: var(--text-color); /* 继承自.container, 值为darkblue */"];
    B --> E["footer <br> color: var(--text-color); /* 继承自:root, 值为black */"];

上图展示了变量的作用域和继承。:root 中定义的 --global-bg 和 --text-color 是全局的，应用于 body 等元素。然而，当 .container 元素重新定义了 --text-color 为 darkblue 时，其内部的 p 元素将继承这个局部值。而与 .container 同级的 footer 元素，则不受 .container 内部变量定义的影响，继续继承来自 :root 的全局 --text-color 值 black。

CSS变量的优势

CSS 变量的引入为前端开发带来了诸多好处。首先，它极大地提高了代码的可维护性。通过将常用的值（如颜色、字体、间距）定义为变量，当需要修改这些值时，只需在变量声明处修改一次，所有引用该变量的地方都会自动更新，避免了在大量样式规则中进行查找和替换的繁琐工作。其次，使用具有描述性名称的变量（如 --brand-primary 而非 #FF6347）可以显著增强代码的可读性和语义化，使得样式意图更加清晰。此外，CSS 变量的动态性是其核心优势之一。由于它们存在于运行时，可以通过 JavaScript 轻松修改，这为实现动态主题切换、响应式布局调整以及与用户交互相关的样式变化提供了简洁高效的途径。例如，可以根据用户的偏好设置或不同的媒体查询条件，动态更改 :root 上的颜色变量，从而改变整个网站的外观。最后，作为浏览器原生特性，使用 CSS 变量无需额外的编译步骤，简化了开发流程，并能直接利用浏览器的优化。

CSS变量与预处理器变量对比

熟悉 Sass 或 Less 等 CSS 预处理器的开发者可能会对其变量功能很熟悉。虽然两者都提供了变量能力，但它们在本质和工作方式上存在关键区别。预处理器变量是在编译（或预处理）阶段被处理的，它们会被替换成最终的静态 CSS 值，然后才发送给浏览器。这意味着一旦 CSS 文件生成，这些变量就不再存在，也无法在运行时被修改。相比之下，CSS 变量是浏览器原生的，它们在 CSS 文件加载后仍然存在于 DOM 中，并且可以在运行时通过 CSS 规则或 JavaScript 进行读取和修改。这种运行时特性使得 CSS 变量在实现动态样式（如主题切换）方面具有预处理器变量无法比拟的优势。作用域规则也有所不同，预处理器变量通常遵循词法作用域或块级作用域，而 CSS 变量则遵循 DOM 的级联和继承规则，与 CSS 的其他属性行为一致。

JavaScript操作CSS变量

CSS 变量的动态性很大程度上体现在可以通过 JavaScript 进行交互。开发者可以使用 JavaScript 来读取或设置任何元素上的 CSS 变量值。设置变量值通常使用 element.style.setProperty() 方法。例如，要改变文档根元素（即全局作用域）上的主色调变量，可以这样做：

// 获取 HTML 根元素
const rootElement = document.documentElement;


// 设置 --primary-color 变量的新值
rootElement.style.setProperty('--primary-color', '#e74c3c');

这会立即更新所有使用 var(--primary-color) 的元素的颜色，无需重新加载页面或样式表。读取变量值则可以使用 getComputedStyle(element).getPropertyValue() 方法。例如，获取根元素上主色调的当前计算值：

// 获取根元素的计算样式
const styles = getComputedStyle(document.documentElement);


// 获取 --primary-color 变量的值
let currentPrimaryColor = styles.getPropertyValue('--primary-color').trim();
// .trim() 用于去除可能存在的前后空格
console.log(currentPrimaryColor); // 可能输出 '#e74c3c' 或初始值 '#007bff'

这种 JavaScript 与 CSS 变量的结合，为创建高度交互和可定制的用户界面开辟了新的可能性，例如允许用户在界面上实时选择并应用主题颜色，或者根据传感器数据动态调整界面元素的视觉表现。

小结

CSS 变量（自定义属性）是 CSS 语言的一项革命性进步，它通过引入可重用、可级联、具有作用域且可在运行时修改的变量，显著提升了 CSS 代码的可维护性、可读性和灵活性。它们不仅简化了颜色、字体等全局样式的管理，还为实现动态主题切换、响应式设计和与 JavaScript 的深度交互提供了强大的原生支持。理解并有效利用 CSS 变量，已成为现代前端开发者必备的技能之一，有助于构建更加健壮、灵活和易于维护的 Web 应用界面。