CSS变量怎么用？动态应用教程

CSS变量（自定义属性）通过`var()`函数实现动态样式管理，是提升CSS可维护性和灵活性的关键。本文深入讲解了CSS变量的定义、使用及与JavaScript的交互。首先，在`:root`或元素内使用`--变量名`定义变量，并通过`var(--变量名)`在样式中引用，实现全局或局部复用。其次，`var(--var, fallback)`提供备用值，确保在变量未定义时仍有默认样式。更重要的是，JavaScript可以通过`element.style.setProperty()`动态修改变量，实现主题切换等交互效果。此外，CSS变量遵循层叠与继承规则，子元素可继承或覆盖父元素变量，作用域由定义位置决定。掌握CSS变量，能有效解决样式重复定义和主题定制痛点，让CSS更具可编程性。

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() 函数来调用它。

它的基本用法很简单：

1. 定义变量： 通常我们会把全局变量定义在 :root 选择器下，因为它代表文档的根元素，这样定义的变量在整个文档中都可用。当然，你也可以在任何其他选择器下定义局部变量。

   :root {
     --primary-color: #3498db;
     --secondary-color: #2ecc71;
     --spacing-unit: 16px;
   }
   
   .card {
     --card-bg: #ffffff;
     --card-padding: var(--spacing-unit); /* 变量也可以引用其他变量 */
   }

2. 使用变量： 在任何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);
   }

3. 提供备用值： 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变量，主要有两种方式，取决于你的变量作用域：

1. 修改全局变量 (定义在 :root 上)： 全局变量通常定义在 :root 伪类上，它们的作用域是整个文档。要修改它们，你需要操作 document.documentElement（它指向 元素）。

   // 获取根元素的引用
   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'); // 切换到深色文本
     }
   });

2. 修改局部变量 (定义在特定元素上)： 如果你在某个特定元素上定义了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变得更像一门真正的“语言”，而不仅仅是一堆声明的集合。

文中关于动态样式,主题切换,CSS变量,JavaScript交互,var()函数的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS变量怎么用？动态应用教程》文章吧，也可关注golang学习网公众号了解相关技术文章。