CSS变量指南
语法
/* 定义（必须以 -- 开头） */
:root {
--color-primary: #6c63ff;
--color-text: #1a1a2e;
--spacing-unit: 8px;
--border-radius: 4px;
--font-size-base: 16px;
}
/* 使用 var() 引用 */
.button {
background: var(--color-primary);
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--border-radius);
}
/* 设置后备值 */
.card {
background: var(--surface-color, #ffffff);
color: var(--text-color, black);
}
/* 嵌套 var() 作为后备 */
.element {
color: var(--custom-color, var(--color-text, #333));
}
深色模式主题切换
:root {
--bg: #ffffff;
--text: #1a1a2e;
--surface: #f5f5f5;
--border: #e0e0e0;
--primary: #6c63ff;
}
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
:root {
--bg: #0d0d1a;
--text: #e8e8f0;
--surface: #1c2035;
--border: #2e3250;
--primary: #8b85ff;
}
}
/* JS 切换 */
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
组件级变量
/* 组件定义自己的默认值 */
.card {
--card-bg: white;
--card-padding: 16px;
--card-radius: 8px;
background: var(--card-bg);
padding: var(--card-padding);
border-radius: var(--card-radius);
}
/* 特定实例覆盖 */
.card--featured {
--card-bg: var(--primary);
}
/* 在上下文中覆盖 */
.dark-section .card {
--card-bg: #2a2a3e;
}
JavaScript 集成
// 读取 CSS 变量
const root = document.documentElement;
const primary = getComputedStyle(root).getPropertyValue('--color-primary').trim();
// 设置 CSS 变量
root.style.setProperty('--color-primary', '#ff6363');
// 移除覆盖（回退到样式表值）
root.style.removeProperty('--color-primary');