CSS自定义属性是可在运行时通过JavaScript动态修改的变量，定义时使用–前缀并在:root或元素上声明，通过var()函数引用；它支持继承与局部覆盖，适用于主题切换等动态场景，而预处理器变量适用于编译时确定的静态值，二者互补。
CSS变量，或者我们更专业地称之为CSS自定义属性，本质上就是我们可以在CSS样式表中定义并命名的值。它们像是一个个可复用的“占位符”，让我们能够集中管理和更新样式中的重复值，从而极大地提升了样式的可维护性和灵活性，特别是在处理主题、组件库或者大型项目时，这种优势会体现得淋漓尽致。
解决方案
CSS自定义属性的定义和使用非常直观。定义时，你需要在一个选择器（通常是
:root
伪类，表示全局作用域，或者任何其他元素选择器，表示局部作用域）内部，使用两个连字符
--
作为前缀来命名你的属性，然后给它赋一个值。使用时，则通过
var()
函数来引用这个自定义属性。
举个例子：
:root { --primary-color: #007bff; /* 定义一个全局主色 */ --spacing-unit: 16px; /* 定义一个全局间距单位 */ } .button { background-color: var(--primary-color); /* 使用主色 */ padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5); /* 结合计算使用间距 */ border: none; border-radius: 4px; color: white; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: #0056b3; /* 鼠标悬停时稍微变深 */ } .card { --card-bg: #f8f9fa; /* 在.card内部定义一个局部背景色 */ background-color: var(--card-bg); margin-bottom: var(--spacing-unit); padding: var(--spacing-unit); border: 1px solid #dee2e6; border-radius: 8px; }
这里，
:root
选择器定义的变量可以在整个文档中被访问到。而
.card
内部定义的
--card-bg
则仅在该
.card
元素及其子元素中有效。这种层级关系，在我看来，是CSS自定义属性最迷人的地方之一，它赋予了我们前所未有的样式控制粒度。
立即学习“前端免费学习笔记（深入）”；
CSS变量与预处理器变量，我该如何选择？
这是一个我经常被问到的问题，也常常在思考。坦白说，CSS自定义属性（CSS变量）和Sass、Less这类预处理器中的变量，它们虽然都叫“变量”，但在本质和使用场景上却有着显著的区别。预处理器变量是在编译阶段被处理的，也就是说，当你编写Sass或Less代码时，这些变量会在代码被编译成纯CSS文件之前，就被它们的值所替换。一旦编译完成，最终的CSS文件中就不再有变量的概念了，只有固定的值。这带来了一个好处：兼容性好，因为最终产物就是纯CSS。
然而，CSS自定义属性则完全不同，它们是浏览器原生支持的，直接存在于运行时（runtime）。这意味着它们的值可以在浏览器加载页面后，通过JavaScript动态地改变，并且这些改变会立即反映在页面上，无需重新编译。这不禁让我思考，这不就是真正意义上的“动态样式”吗？
所以，选择的关键点在于“动态性”和“运行时控制”。如果你需要实现主题切换（比如深色模式/浅色模式）、用户自定义样式、或者在JavaScript中根据用户行为实时调整样式值，那么CSS自定义属性无疑是更好的选择。它们能够与JavaScript完美协作，提供无缝的动态体验。而对于那些在项目初期就确定，且不需在运行时改变的常量，比如一些基础的颜色调色板、固定的字体栈或者一些不会变的布局断点，预处理器变量依然是高效且方便的。
在我看来，它们并非互斥，而是互补的。很多时候，我们可以在预处理器中定义一些基础变量，然后将这些变量的值赋给CSS自定义属性。这样既能利用预处理器强大的功能（如混入、函数等），又能享受CSS自定义属性在运行时带来的灵活性。这就像是构建一个乐高模型，有些基础砖块用预处理器预制好，而那些需要灵活调整的装饰件，则交给CSS自定义属性来动态拼装。
CSS变量的继承与作用域，你真的理解了吗？
谈到CSS自定义属性，就不能不深入理解它的继承机制和作用域。这与我们平时使用的普通CSS属性的继承规则非常相似，但又有一些独特的魅力。一个自定义属性一旦被定义，它就会像其他可继承的CSS属性（如
color
,
font-size
等）一样，沿着DOM树向下传递给其子元素。
最常见的做法是在
:root
伪类上定义全局变量。
:root
代表了文档的根元素（通常是
<html>
），所以在这里定义的变量，理论上可以在页面的任何地方被访问和使用。
/* 定义全局变量 */ :root { --global-text-color: #333; --global-font-size: 16px; } body { color: var(--global-text-color); /* body继承并使用 */ font-size: var(--global-font-size); } .container { /* .container也会继承这些变量 */ }
但事情并非一成不变。自定义属性的真正强大之处在于其“局部作用域”和“覆盖”能力。你可以在任何元素上重新定义一个同名的自定义属性，这个新的定义会覆盖掉从父级继承下来的值，并且这个新值只在该元素及其子元素中生效。
:root { --highlight-color: gold; } .section { --highlight-color: lightblue; /* 在.section中重新定义 */ border: 1px solid var(--highlight-color); /* 这里会是lightblue */ } .section p { background-color: var(--highlight-color); /* .section的子元素也会使用lightblue */ } .another-element { background-color: var(--highlight-color); /* 这里会是gold，因为不在.section的作用域内 */ }
这种机制让我觉得非常灵活，它允许我们为特定的组件或区域创建独立的样式“主题”或“配置”，而不会影响到全局。当你需要一个组件有自己独特的颜色或间距，但又希望它能从全局继承大部分基础样式时，这种局部覆盖就显得尤为重要。它避免了写大量重复的CSS代码，同时也让样式结构更加清晰，易于管理。理解了这一点，你就能更好地组织你的样式，实现更复杂的组件化设计。
JavaScript与CSS变量的奇妙联动：动态主题与更多可能
CSS自定义属性之所以被认为是CSS的未来，很大一部分原因在于它与JavaScript的无缝集成。这种集成，为前端开发带来了前所未有的动态性和交互性，最典型的应用场景就是动态主题切换，比如我们常见的深色模式（Dark Mode）。
想象一下，如果我们要实现一个深色模式，在没有CSS变量之前，我们可能需要切换整个CSS文件，或者为每个需要改变的元素写两套样式，然后通过JavaScript添加/移除一个类名来控制。这无疑增加了维护成本和代码复杂性。但有了CSS变量，一切都变得简单而优雅。
我们可以像这样定义我们的主题变量：
/* light-theme.css 或直接在HTML中 */ :root { --bg-color: #ffffff; --text-color: #333333; --border-color: #e0e0e0; } /* dark-theme.css 或通过JavaScript动态设置 */ .dark-mode { --bg-color: #333333; --text-color: #f0f0f0; --border-color: #555555; }
然后，在CSS中，我们直接使用这些变量：
body { background-color: var(--bg-color); color: var(--text-color); } .card { border: 1px solid var(--border-color); background-color: var(--bg-color); }
现在，通过JavaScript，我们只需要简单地切换
<html>
或
<body>
上的
dark-mode
类，就可以实现整个页面的主题切换：
document.getElementById('theme-toggle').addEventListener('click', () => { document.documentElement.classList.toggle('dark-mode'); // 也可以保存用户偏好到localStorage if (document.documentElement.classList.contains('dark-mode')) { localStorage.setItem('theme', 'dark'); } else { localStorage.setItem('theme', 'light'); } }); // 页面加载时检查用户偏好 if (localStorage.getItem('theme') === 'dark') { document.documentElement.classList.add('dark-mode'); }
这只是冰山一角。JavaScript还可以直接读取和设置CSS变量的值。
获取一个CSS变量的值：
const rootStyles = getComputedStyle(document.documentElement); const primaryColor = rootStyles.getPropertyValue('--primary-color').trim(); console.log(primaryColor); // 输出 #007bff
设置一个CSS变量的值：
document.documentElement.style.setProperty('--primary-color', 'rebeccapurple'); // 页面上所有使用--primary-color的地方都会立即变成rebeccapurple
这种能力打开了无数扇门：用户自定义字体大小、间距、动画速度，甚至可以根据滚动位置或视口大小动态调整某些样式参数。这让前端的交互体验变得更加丰富和个性化。对我来说，这不仅仅是技术的进步，更是用户体验设计理念的一次飞跃，因为它将更多的控制权交到了开发者和用户手中。
css教程 css javascript java html 前端 go 处理器 浏览器 ssl 前端开发 ai 区别 JavaScript css less html sass 常量 全局变量 预处理器 继承 栈 var 作用域 dom 选择器 样式表 伪类