哎呀， 今天来聊聊 CSS 变量，那玩意儿挺好用的，但写出来好像有点...嗯...像我一样。要说 CSS 变量，其实就是让网页的颜色变得更方便管理，就像给每个颜色都贴了个标签一样。以前要改颜色，得到处找修改的地方，真麻烦！现在有了 CSS 变量，就可以集中管理配色方案了，正宗。。

什么是 CSS 变量？

简单CSS 变量就像是网页上的“小盒子”，用来存储颜色值或者其他数据。你可以把它们想象成一个容器，里面放着你的颜色代码，然后用这个容器的名字来引用它。这样以后想改颜色了直接在容器的名字上改就行了是不是很方便，我开心到飞起。？

定义 CSS 变量

在 CSS 中定义 CSS 变量有点像给东西起名字。要用 `--` 开头加上一个名字。比如 `--primary-color` 就是一个 CSS 变量名。这个名字最好不要太长太复杂，不然以后记起来容易糊ǐ.，复盘一下。

:root {
    --primary-color: #3498db; /* 蓝色 */
    --secondary-color: #e74c3c; /* 红色 */
    --font-size: 16px;
  }
  body {
    font-size: var; /* 使用全局字体大小 */
    color: var; /* 使用主色 */
  }
  .button {
    background-color: var; /* 使用次色 */
    border: none; /* 去掉边框 */
    padding: 10px 20px; /* 添加内边距 */
    cursor: pointer; /* 设置鼠标样式 */
  }
   /* 如果你想改变按钮的颜色, 只需修改 --secondary-color 就行!*/

我好了。 看这段代码啊！`:root` 就是全局的根选择器，在这里我们定义了几个颜色和字体大小。然后 `body` 和 `.button` 都用了 `var` 来引用这些变量。如果我改成 `--secondary-color: #f39c12`, 所有用到这个颜色的地方都会跟着变!

局部作用域：小心你的 “小盒子”

这里就要说一下 CSS 变量的一个坑啦。它们有自己的“范围”，就像你家的东西只能放在你家里面。如果你在某个地方定义了一个 `--my-color`, 它只能在这个地方和它的后代元素中使用哦！如果你想让它全局生效, 那就得放在 `:root` 里.

/* 全局生效的例子 */ :root { --my-color 好吧... : blue; } .element { color: var; }

/* 本地生效的例子 */ .local { --my-loc 坦白说... al : red;} .local2{ color : var}

进阶用法：动态改变颜色

有时候你想让网页的颜色根据用户的选择或者其他条件而改变吗？CSS 变量可以帮你实现！你可以通过 JavaScript 来动态地修改这些颜色的值。 // JavaScript 代码示例 function changeColor { document.documentElement.style.setProperty; } // 调用函数改变主色 let primaryColor = prompt; if { changeColor; }，很棒。

别忘了命名规范