异常教程

CSS var() 函数（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 CSS 的世界里，重复代码就像重复劳动一样令人疲惫。想象一下，当你需要为多个组件设置相同的颜色或字体大小时，手动复制粘贴不仅效率低下，还容易出错。而 CSS var() 函数的出现，就像给 CSS 添加了“变量”这一超能力，让样式管理变得灵活且高效。本文将从基础语法到实战案例，逐步解析如何用 var() 函数优化你的 CSS 代码，并通过生动的比喻帮助你快速理解其核心逻辑。

基础语法：变量的定义与使用

定义变量：用自定义属性命名你的“样式盒”

在 CSS 中，变量被称为自定义属性（Custom Properties），通过 -- 符号定义。你可以将变量想象成一个“样式盒”，用来存储颜色、数值等值，方便后续调用。例如：

:root {  
  --primary-color: #3498db;  /* 定义主色调变量 */  
  --spacing: 1rem;          /* 定义间距变量 */  
}

这里的 :root 选择器表示变量定义在根元素（即 <html>）上，全局可用。

调用变量：用 var() 函数打开“样式盒”

通过 var() 函数可以引用已定义的变量。例如：

.button {  
  background-color: var(--primary-color);  
  padding: var(--spacing);  
}

这样，当需要修改主色调时，只需调整 --primary-color 的值，所有使用该变量的地方会自动更新，避免了重复修改的麻烦。

作用域与继承：变量的“家族关系”

变量的作用域规则类似于 CSS 的继承机制，可以用“家族财产继承”来比喻：

  • 根变量（全局变量）：定义在 :root 上的变量，如同家族的“祖产”，所有后代元素都能访问。
  • 局部变量：定义在某个选择器内的变量，如同家庭成员的“个人财产”，仅在该选择器及其后代中生效。

例如：

/* 根变量：全局可用 */  
:root {  
  --text-color: #333;  
}  

/* 局部变量：仅在 .container 及其子元素中生效 */  
.container {  
  --text-color: #fff;  
  color: var(--text-color);  
}  

.child {  
  color: var(--text-color); /* 继承自 .container 的局部变量 */  
}

变量覆盖规则

若子元素定义了同名变量，会覆盖父元素的值，如同“子承父业”后修改了财产分配。例如：

.parent {  
  --size: 20px;  
}  

.child {  
  --size: 30px;  
  font-size: var(--size); /* 输出 30px */  
}

动态修改：变量的“变形能力”

变量的值并非一成不变。通过 JavaScript 可以动态修改变量，这为交互效果提供了可能。例如：

// 通过 JS 修改根变量  
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

配合 CSS 的 @property 规则（需浏览器支持），还能为变量添加动画：

@property --progress {  
  syntax: '<percentage>';  
  inherits: false;  
  initial-value: 0%;  
}  

.progress-bar {  
  width: var(--progress);  
  transition: var(--progress) 1s;  
}

实战案例：用变量构建主题切换系统

案例需求

设计一个支持“浅色模式”和“深色模式”的按钮切换功能。

实现步骤

  1. 定义根变量：在 :root 中设置两种主题的变量值。 
    :root {  
  --background: #fff;  
  --text-color: #333;  
  --button-bg: #3498db;  
}
  2. 创建深色主题变量：通过类名覆盖变量。 
    .dark-theme {  
  --background: #222;  
  --text-color: #eee;  
  --button-bg: #2c3e50;  
}
  3. HTML 结构与 JS 控制：添加切换按钮，并通过 JS 切换类名。 
    <button onclick="toggleTheme()">切换主题</button>  

    function toggleTheme() {  
  document.body.classList.toggle('dark-theme');  
}
  4. 应用变量到页面元素： 
    body {  
  background-color: var(--background);  
  color: var(--text-color);  
}  

.button {  
  background-color: var(--button-bg);  
}

通过变量的全局覆盖能力，主题切换只需修改类名，无需逐个元素调整样式。

进阶技巧：变量的“隐藏超能力”

技巧 1：变量嵌套与计算

变量可以引用其他变量，甚至在 calc() 中进行动态计算：

:root {  
  --base: 16px;  
  --font-size: calc(var(--base) * 1.25); /* 20px */  
}  

h1 {  
  font-size: var(--font-size);  
}

技巧 2：回退值（Fallback）

var() 的第二个参数是回退值，当变量未定义时使用：

.button {  
  background-color: var(--unknown-color, #3498db); /* 若 --unknown-color 不存在，则用默认色 */  
}

技巧 3：与预处理器对比

与 Sass 的 $变量 不同，CSS 变量在浏览器运行时生效，支持动态修改。例如，Sass 的变量需编译后才能使用，而 CSS 变量无需构建步骤，适合需要实时交互的场景。

总结与展望

通过 CSS var() 函数，开发者可以像管理 JavaScript 变量一样操作样式，极大提升了代码的可维护性和灵活性。无论是基础的样式复用、主题系统构建，还是动态交互效果，变量都能提供优雅的解决方案。

随着 CSS 自定义属性的持续演进（如 @property 规则的完善），未来它将在动画、响应式设计等领域发挥更大作用。掌握这一工具，你将能更高效地应对现代前端开发的挑战。

希望本文能帮助你理解 CSS var() 函数的核心逻辑，并在项目中大胆实践！

最新发布

查看更多文章