css变量通过var()函数实现动态样式管理，支持定义、引用与JavaScript交互。1. 定义变量：在:root或元素中以–开头声明，如–primary-color: #3498db；2. 使用变量：通过var(–变量名)引用，实现全局或局部复用；3. 提供备用值：var(–var, fallback)在变量未定义时使用默认值；4. 动态修改：JavaScript通过element.style.setProperty()修改变量，实现主题切换等交互；5. 层叠与继承：变量遵循CSS继承规则，子元素可继承或覆盖父元素变量，作用域由定义位置决定。该机制提升维护性、支持运行时动态更新，解决重复定义与主题定制痛点，使CSS更具可编程性。
var()
函数就是CSS提供的一种非常直接且强大的方式，用来获取我们自定义的CSS属性（也就是我们常说的CSS变量）的值。它允许我们在样式表中定义可复用的值，并在需要的地方通过
var(--变量名)
的形式引用它们，从而实现更灵活、更易维护的样式管理。
解决方案
CSS变量，或者说自定义属性（Custom Properties），其实就是我们给CSS属性值起的一个“名字”。这个名字以两根连字符开头，比如
--main-color
。定义好之后，我们就可以在任何需要使用这个值的地方，通过
var()
函数来调用它。
它的基本用法很简单：
-
定义变量： 通常我们会把全局变量定义在
:root
选择器下，因为它代表文档的根元素，这样定义的变量在整个文档中都可用。当然，你也可以在任何其他选择器下定义局部变量。
立即学习“前端免费学习笔记（深入）”；
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --spacing-unit: 16px; } .card { --card-bg: #ffffff; --card-padding: var(--spacing-unit); /* 变量也可以引用其他变量 */ } -
使用变量： 在任何CSS属性值需要用到这个变量的地方，就用
var()
函数来引用它。
body { background-color: var(--primary-color); font-family: sans-serif; } h1 { color: var(--secondary-color); margin-bottom: var(--spacing-unit); } .card { background-color: var(--card-bg); padding: var(--card-padding); border: 1px solid var(--primary-color); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -
提供备用值：
var()
函数还支持第二个参数，作为备用值。如果第一个变量没有被定义或者无效，就会使用这个备用值。这在处理一些不确定性时特别有用。
.element { color: var(--undefined-color, #ff0000); /* 如果--undefined-color不存在，就用红色 */ }
通过这种方式，我们相当于给CSS赋予了编程语言中“变量”的概念，这在以前是只有CSS预处理器才能做到的。现在，它原生支持了，而且功能更强大，因为它是动态的，可以被JavaScript实时修改。
为什么我们要用CSS变量？它到底解决了什么痛点？
说实话，刚开始接触CSS变量的时候，我心里犯嘀咕：这不就是sass、less那些预处理器早就有的功能吗？有啥稀奇的？但用了一段时间后，我才发现它真香，而且解决了一些预处理器力所不能及的痛点。
最核心的痛点是重复性和维护性。想象一下，你的项目里有个主色调，在几十个甚至上百个地方都用到了。如果有一天品牌方说：“我们换个主色调吧！” 那你可就惨了，得全局搜索替换，还可能漏掉一些。预处理器能解决这个问题，但它是在编译时替换的，一旦编译成CSS文件，这些变量就不复存在了。
CSS变量则不同，它是运行时的。这意味着它存在于浏览器中，可以被浏览器直接解析。它带来的好处是：
- 真正的单一数据源： 你在一个地方定义
--primary-color: #3498db;
，所有用到
var(--primary-color)
的地方都指向这一个值。要改？只改定义的地方，所有引用都会实时更新。这对于大型项目或者需要保持视觉一致性的组件库来说，简直是福音。
- 主题切换变得轻而易举： 这是我个人觉得CSS变量最亮眼的应用之一。想实现深色模式？或者让用户自定义主题色？以前这得靠JavaScript操作dom元素的
style
属性，或者切换整个CSS文件，非常笨重。现在，你只需要在
:root
或者某个父元素上，用JavaScript动态修改几个CSS变量的值，整个页面的颜色、字体、间距就能瞬间切换，平滑得不得了。
- 组件的封装与灵活性： 在开发组件时，我们可以为组件定义一些“配置项”，比如
--button-bg-color
、
--button-text-color
。这样，在使用组件时，我们只需要覆盖这些变量，就能轻松定制组件样式，而不需要写一大堆层层叠叠的覆盖规则，或者给组件添加无数个修饰类。这种方式让组件的API设计更优雅，也更具扩展性。
- 与JavaScript的无缝协作： 预处理器变量是静态的，JavaScript无法直接访问或修改。但CSS变量是DOM的一部分，JavaScript可以通过
element.style.setProperty()
或
getComputedStyle()
轻松地读写它们。这打开了前端动态样式的新世界，比如根据用户操作、系统偏好甚至外部API数据来实时调整样式。
所以，CSS变量不仅仅是“方便”，它从根本上改变了我们管理和思考CSS样式的方式，让CSS变得更加动态和“可编程”。
动态修改CSS变量：JavaScript如何介入？
既然CSS变量是运行时的，那它与JavaScript的结合就变得非常有趣了。我们可以利用JavaScript来动态地改变CSS变量的值，从而实现各种酷炫或实用的交互效果，比如主题切换、用户自定义设置、或者根据某些状态来调整ui。
要用JavaScript修改CSS变量，主要有两种方式，取决于你的变量作用域：
-
修改全局变量 (定义在
:root
上)： 全局变量通常定义在
:root
伪类上，它们的作用域是整个文档。要修改它们，你需要操作
document.documentElement
（它指向
<html>
元素）。
// 获取根元素的引用 const rootElement = document.documentElement; // 修改 --primary-color 变量的值 rootElement.style.setProperty('--primary-color', '#ff6347'); // 将主色调改为番茄红 // 假设你有一个按钮来切换深色模式 const toggleDarkModeButton = document.getElementById('toggle-dark-mode'); toggleDarkModeButton.addEventListener('click', () => { // 检查当前是否是深色模式 const currentBg = getComputedStyle(rootElement).getPropertyValue('--bg-color'); if (currentBg === '#333') { // 假设深色模式背景是 #333 rootElement.style.setProperty('--bg-color', '#f0f2f5'); // 切换到浅色背景 rootElement.style.setProperty('--text-color', '#333'); // 切换到浅色文本 } else { rootElement.style.setProperty('--bg-color', '#333'); // 切换到深色背景 rootElement.style.setProperty('--text-color', '#f0f2f5'); // 切换到深色文本 } }); -
修改局部变量 (定义在特定元素上)： 如果你在某个特定元素上定义了CSS变量，那么你需要获取该元素的引用，然后通过它的
style
属性来修改。
<div id="myCard" class="card">这是一个卡片</div>
.card { --card-border-color: #ccc; border: 1px solid var(--card-border-color); padding: 20px; margin: 10px; }const myCard = document.getElementById('myCard'); // 修改这个卡片的边框颜色 myCard.style.setProperty('--card-border-color', '#a020f0'); // 紫色边框 // 甚至可以根据用户输入来动态调整 const slider = document.getElementById('colorSlider'); // 假设有一个颜色选择器 slider.addEventListener('input', (event) => { myCard.style.setProperty('--card-border-color', event.target.value); });
获取CSS变量的值： 除了设置，JavaScript也可以获取CSS变量的当前值。这需要使用
getComputedStyle()
方法。
// 获取根元素的 --primary-color const rootElement = document.documentElement; const primaryColor = getComputedStyle(rootElement).getPropertyValue('--primary-color'); console.log('当前主色调:', primaryColor.trim()); // 注意要 trim() 去掉可能存在的空格 // 获取某个元素的局部变量 const myCard = document.getElementById('myCard'); const cardBorderColor = getComputedStyle(myCard).getPropertyValue('--card-border-color'); console.log('卡片边框颜色:', cardBorderColor.trim());
setProperty()
和
getPropertyValue()
是操作CSS变量的关键。通过它们，我们可以构建出非常灵活和响应式的用户界面。但也要注意，频繁地操作DOM样式可能会影响性能，所以在设计交互时，还是要权衡一下。不过对于主题切换这类不那么频繁的操作，CSS变量加JavaScript的组合简直是完美。
CSS变量的层叠与作用域：这玩意儿有点意思
CSS变量在行为上，其实和普通的CSS属性非常相似，它也遵循CSS的层叠（Cascade）和继承（Inheritance）规则。理解这一点对于避免一些意想不到的问题至关重要。
首先，自定义属性（CSS变量）是可继承的。这意味着如果你在父元素上定义了一个变量，它的子元素默认就可以使用这个变量，除非子元素自己重新定义了同名的变量。
:root { --text-color: #333; } div { --text-color: #00f; /* 局部覆盖 */ } p { color: var(--text-color); /* 会继承其父级 div 的 --text-color */ } span { /* 假设 span 在 div 外部，或者 div 内部但没有覆盖 */ color: var(--text-color); /* 会继承 :root 的 --text-color */ }
在这个例子里，
p
标签的文本颜色会是蓝色，因为它从它的父级
div
继承了
--text-color
。而
span
标签，如果它不在
div
内部或者
div
没有覆盖它的
--text-color
，那么它会从
:root
继承，颜色会是
#333
。
这种层叠行为让CSS变量变得非常强大和灵活。你可以定义一个全局默认值，然后在特定的组件或区域内，通过在父元素上重新定义同名变量来“覆盖”这个默认值，从而实现局部定制。
举个例子，你可能有一个通用的按钮组件，它使用
--button-bg
和
--button-text
变量。
/* 全局默认按钮样式 */ :root { --button-bg: #007bff; --button-text: #fff; } .button { background-color: var(--button-bg); color: var(--button-text); padding: 10px 15px; border-radius: 5px; border: none; cursor: pointer; }
现在，如果你想在一个特定的区域，比如一个卡片内部，让按钮变成绿色：
<div class="card"> <button class="button">默认按钮</button> <div class="green-buttons"> <button class="button">绿色按钮</button> </div> </div>
.card { /* ... 卡片自己的样式 ... */ } .green-buttons { --button-bg: #28a745; /* 在这个区域内覆盖按钮背景色 */ --button-text: #fff; }
这样，
green-buttons
容器内的按钮就会自动变成绿色，而其他地方的按钮仍然保持蓝色。这就是CSS变量的作用域和层叠机制在实际应用中的体现。变量的作用域就是它被定义的选择器及其子孙元素。
一个常见的误区是认为
var()
只是一个简单的字符串替换。但它不是。它是一个函数，它会查找最近的、有效的自定义属性定义。如果找不到，它就会使用备用值，或者如果连备用值都没有，那么这个CSS属性就会被视为无效。
理解这些行为，能帮助我们更好地组织CSS代码，避免不必要的重复，并为构建可维护、可扩展的样式系统打下坚实基础。它让CSS变得更像一门真正的“语言”，而不仅仅是一堆声明的集合。
评论（已关闭）
评论已关闭