前端Wiki/CSS/深入/层叠继承与进阶技巧

CSS 变量 var

CSS 自定义属性（变量）以 -- 开头定义，用 var() 读取：

定义：--primary: #4a9eff;
使用：color: var(--primary);
兜底值：color: var(--primary, blue); 变量不存在时用 blue。

变量遵循继承规则，所以惯例是把全局变量定义在 :root（根元素）上，全站可用。它带来的最大价值是一处定义、处处生效：主题色、间距、圆角集中管理，改主题只改几行；配合 JS 修改 document.documentElement.style 上的变量，还能实现运行时换肤。

变量里还能存任何合法值，甚至整段声明值（如 --shadow: 0 2px 8px rgba(0,0,0,.2)），组合复用非常灵活。

本节要点变量以 -- 开头、var() 读取、可带兜底值；全局变量写进 :root；改一处即换全站主题，JS 配合可实现动态换肤。

CSS

<style>
  :root {
    --primary: #4a9eff;   /* 主题色 */
    --radius: 8px;        /* 统一圆角 */
    --gap: 12px;
  }
  .btn {
    background: var(--primary);
    border-radius: var(--radius);
    padding: var(--gap) calc(var(--gap) * 2);
    color: #fff; border: none;
  }
  .card {
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    padding: var(--gap);
  }
</style>
<button class="btn">变量驱动的按钮</button>
<div class="card">变量驱动的卡片</div>

🔗 相关词条自定义属性 CSS JS 元素继承圆角

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读