HTML与CSS中变量的关联设置：如何实现一处修改多处生效？

没问题！用变量替代重复的固定值绝对是提升代码可维护性的好办法——改一次变量，所有用到它的地方自动同步，再也不用挨个找、挨个改了。我来给你一步步讲具体怎么实现：

一、CSS全局变量（最常用的方案） #

CSS原生支持自定义属性（也就是我们说的CSS变量），推荐把全局变量定义在:root伪类下，这样整个文档里的所有元素都能访问到这些变量。

1. 定义全局变量 #

/* 把所有全局变量放在:root里，相当于全局作用域 */
:root {
  /* 颜色变量 */
  --primary-color: #2563eb;
  --secondary-color: #64748b;
  /* 间距变量 */
  --base-padding: 1rem;
  --large-padding: 1.5rem;
  /* 其他通用样式变量 */
  --border-radius: 8px;
  --text-size: 16px;
}

2. 使用变量 #

在需要用到这些值的地方，用var()函数调用变量就行，还可以给变量设置默认值（如果变量未定义时会生效）：

/* 按钮样式 */
.btn {
  background-color: var(--primary-color);
  padding: var(--base-padding) var(--large-padding);
  border-radius: var(--border-radius);
  font-size: var(--text-size);
}

/* 卡片样式 */
.card {
  padding: var(--large-padding);
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius);
  font-size: calc(var(--text-size) * 0.9); /* 还能结合calc做动态计算 */
}

3. 修改变量（一键同步所有使用场景） #

不管是静态修改还是动态修改都很方便：

• 静态修改：直接修改:root里的变量值，所有用到它的地方自动更新；也可以在特定场景下重新定义变量，比如深色模式：

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #3b82f6;
    --secondary-color: #94a3b8;
  }
}

• 动态修改（用JS）：如果需要根据用户操作实时改变样式，用JS修改变量就行：

// 修改全局变量
document.documentElement.style.setProperty('--primary-color', '#ef4444');

// 修改某个元素的局部变量（只影响该元素及其子元素）
document.querySelector('.card').style.setProperty('--base-padding', '2rem');

二、结合HTML自定义属性的局部变量 #

如果需要给单个或部分元素设置专属变量，可以结合HTML的data-*属性或者直接在元素的style里定义局部变量：

方式1：直接在HTML元素里定义局部变量 #

<!-- 给这个盒子单独设置背景色变量 -->
<div class="box" style="--box-bg: #f97316;">橙色背景盒子</div>
<div class="box" style="--box-bg: #8b5cf6;">紫色背景盒子</div>

然后在CSS里调用这个局部变量：

.box {
  background-color: var(--box-bg, #ffffff); /* 第二个参数是默认值 */
  padding: var(--base-padding);
  border-radius: var(--border-radius);
}

方式2：用HTML data属性配合CSS变量 #

<div class="box" data-bg="#f97316">橙色背景盒子</div>

然后在CSS里通过attr()函数读取data属性值，再赋值给变量：

.box {
  --box-bg: attr(data-bg);
  background-color: var(--box-bg);
}

小技巧：兼容性与降级 #

现在现代浏览器（Chrome、Firefox、Edge等）都完美支持CSS变量，如果需要兼容旧版IE，可以给属性写个降级值：

.btn {
  /* 降级值，旧浏览器会用这个 */
  background-color: #2563eb;
  /* CSS变量，现代浏览器优先用这个 */
  background-color: var(--primary-color);
}

这样一来，你就可以把所有重复的固定值都换成变量，后续修改只需要调整变量定义，所有使用的地方自动同步，简直不要太方便！

内容的提问来源于stack exchange，提问作者Andres Cal