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这种能力打开了无数扇门：用户自定义字体大小、间距、动画速度，甚至可以根据滚动位置或视口大小动态调整某些样式参数。这让前端的交互体验变得更加丰富和个性化。对我来说，这不仅仅是技术的进步，更是用户体验设计理念的一次飞跃，因为它将更多的控制权交到了开发者和用户手中。
