CSS 变量：设计系统的调色板、着色器

你有没有为换主题改几十行代码而头大？CSS 变量来了：通过 :root 统一声明，如：

:root {
  --primary-color: #4a90e2;
  --font-size-base: 16px;
}


使用时就像调用变量一样：

button {
  color: var(--primary-color);
  font-size: var(--font-size-base);
}


当你需要统一调整风格时，只需改变量值即可，全站同步生效。更进一步，结合 @media 或类名切换，还能实现“暗黑模式”、“高对比配色”等主题化设计。CSS 变量让设计系统更像一座乐高拼装架，一改即动全身，灵活优雅。