什么是 CSS 自定义属性

CSS 自定义属性（CSS Custom Properties），俗称 CSS 变量，是现代 CSS 中最被低估的特性之一。它让你可以在 CSS 中定义可复用的值，并在整个样式表中引用。

css 
:root {
  --color-primary: #2563eb;
  --spacing-md: 16px;
  --radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

与 SCSS 变量的关键区别

许多开发者习惯用 SCSS 变量，但 CSS 自定义属性有几个 SCSS 变量做不到的特性：

1. 运行时动态更新

SCSS 变量在编译后就被替换为静态值。CSS 自定义属性在浏览器运行时仍然存在，可以通过 JavaScript 修改：

javascript 
document.documentElement.style.setProperty('--color-primary', '#dc2626');

2. 级联与继承

CSS 自定义属性遵循 CSS 的级联规则，可以在不同作用域中重新定义：

css 
:root { --text-color: #1c1917; }
.dark { --text-color: #fafaf9; }
.sidebar { --text-color: #57534e; }

3. Media Query 内可用

css 
:root { --columns: 1; }
@media (min-width: 768px) { :root { --columns: 3; } }

.grid { grid-template-columns: repeat(var(--columns), 1fr); }

实用技巧

与 calc() 组合

css 
:root {
  --space-unit: 8px;
  --space-md: calc(var(--space-unit) * 2);  /* 16px */
  --space-lg: calc(var(--space-unit) * 3);  /* 24px */
}

颜色函数

现代浏览器支持相对颜色语法：

css 
:root {
  --brand: #2563eb;
  --brand-light: color-mix(in srgb, var(--brand), white 80%);
}

默认值与回退

css 
/* 如果 --custom-color 未定义，使用 #333 */
color: var(--custom-color, #333);

设计系统中的应用

在 Shugo 主题中，我们广泛使用 CSS 自定义属性来构建设计系统：

层级 用途 示例
色彩 背景、文字、强调色 --color-bg, --color-accent
间距 统一间距尺度 --space-sm, --space-lg
卡片 圆角、阴影、内边距 --card-radius, --card-shadow
排版 字体、行高、字号 --font-body, --line-height-body

小结

CSS 自定义属性是现代 CSS 工程化的基石。如果你还在用 SCSS 变量，现在是时候切换到原生 CSS 自定义属性了。

提示：CSS 自定义属性在 IE11 不受支持。如果你需要兼容 IE11，建议使用 PostCSS 插件做降级处理。