CSS 自定义属性（变量）

:root {
  --primary-color: #007bff;
  --font-size: 16px;
}

.button {
  background-color: var(--primary-color);
  font-size: var(--font-size, 14px); /* 若未定义则 14px */
}

:root {
  /* 颜色 */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;

  /* 字体 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;
  --font-size-large: 1.25rem;
  --font-size-small: 0.875rem;

  /* 间距（用一个基准单位派生一整套） */
  --spacing-unit: 8px;
  --spacing-sm: var(--spacing-unit);
  --spacing-md: calc(var(--spacing-unit) * 2);
  --spacing-lg: calc(var(--spacing-unit) * 3);

  /* 边框与阴影 */
  --border-radius: 4px;
  --border-width: 1px;
  --border-color: #dee2e6;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.button {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  box-shadow: var(--box-shadow);
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover { box-shadow: var(--box-shadow-lg); }

.button--secondary { background-color: var(--secondary-color); }
.button--success   { background-color: var(--success-color); }
.button--danger    { background-color: var(--danger-color); }

/* 浅色主题（默认） */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --border-color: #dee2e6;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* 深色主题：只改变量，其它样式不动 */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --border-color: #404040;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow-color);
  color: var(--text-primary);
}

.text-secondary { color: var(--text-secondary); }

// JavaScript 切换主题
function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

// 初始化：优先读本地存储，其次跟随系统偏好
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', saved || (prefersDark ? 'dark' : 'light'));

const root = document.documentElement;

// 读取变量值
const primary = getComputedStyle(root).getPropertyValue('--primary-color').trim();

// 设置变量值（立即全站生效）
root.style.setProperty('--primary-color', '#e91e63');

// 交互式：跟随鼠标位置更新变量，做聚光灯/渐变效果
document.addEventListener('mousemove', (e) => {
  root.style.setProperty('--mouse-x', e.clientX + 'px');
  root.style.setProperty('--mouse-y', e.clientY + 'px');
});

:root {
  --spacing-unit: 8px;
  --border-width: 2px;
  --font-size: 16px;
}

.card {
  padding: calc(var(--spacing-unit) * 2);
  margin: calc(var(--spacing-unit) * 1.5);
  border: var(--border-width) solid #ddd;
  font-size: calc(var(--font-size) * 1.125);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--spacing-unit) * 2);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 1.5);
  }
}

/* 组件内部用变量做"可配置接口"，外部改一个变量就能定制 */
.badge {
  --badge-bg: var(--primary-color);
  --badge-fg: #fff;
  background: var(--badge-bg);
  color: var(--badge-fg);
  padding: 2px 8px;
  border-radius: 10px;
}

/* 危险徽标只需覆盖局部变量，无需重写整块样式 */
.badge--danger { --badge-bg: var(--danger-color); }
.badge--muted  { --badge-bg: #e9ecef; --badge-fg: #495057; }

:root { --gap: 24px; --cols: 4; }

@media (max-width: 1024px) { :root { --gap: 16px; --cols: 3; } }
@media (max-width: 768px)  { :root { --gap: 12px; --cols: 2; } }
@media (max-width: 480px)  { :root { --gap: 8px;  --cols: 1; } }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}
/* 所有用到 --gap / --cols 的地方都自动跟着断点变化 */

/* 普通 CSS 变量不能被平滑动画；注册后带类型可插值 */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.spinner {
  background: conic-gradient(#007bff var(--angle), #eee 0);
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to { --angle: 360deg; } /* 因已注册类型，能平滑过渡 */
}

:root {
  --color: 20px;   /* 存了一个长度值 */
}
.box {
  color: red;                 /* 先设一个正常颜色 */
  color: var(--color);        /* 20px 不是合法颜色 → 该声明作废 */
  /* 结果不是 red，而是继承来的颜色或初始值 currentColor 逻辑，
     很多人误以为会回退到上一行的 red，其实不会 */
}

/* fallback 只兜"没定义"，不兜"定义了但非法" */
.a { color: var(--maybe-undefined, blue); } /* --maybe-undefined 没定义 → blue，OK */

:root { --bad: 10px; }
.b { color: var(--bad, blue); }             /* 定义了但非法 → 不是 blue，而是 IACVT */

@property --brand-h {
  syntax: '<number>';   /* 只接受数字 */
  inherits: false;      /* 不向子元素继承 */
  initial-value: 210;   /* 默认色相 */
}
@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* 注册后，非法值会被忽略并回退到 initial-value，而不是引发 IACVT */
.ring {
  background: conic-gradient(#4caf50 var(--progress), #eee 0);
  transition: --progress 0.6s ease;  /* 现在能平滑动画了 */
}
.ring:hover { --progress: 75%; }

/* 联合类型 + 列表示例 */
@property --gap {
  syntax: '<length> | auto';
  inherits: true;
  initial-value: 16px;
}

CSS.registerProperty({
  name: '--tilt',
  syntax: '<angle>',
  inherits: false,
  initialValue: '0deg',
});

:root {
  /* 第 1 层 primitive（原始值，不带语义，只是调色板） */
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --gray-50:  #f9fafb;
  --gray-900: #111827;
  --red-500:  #ef4444;

  /* 第 2 层 semantic（语义令牌，业务只认这层） */
  --color-bg:        var(--gray-50);
  --color-text:      var(--gray-900);
  --color-accent:    var(--blue-500);
  --color-accent-hover: var(--blue-600);
  --color-danger:    var(--red-500);

  /* 第 3 层 component（组件令牌，可被单组件覆盖） */
  --button-bg:       var(--color-accent);
  --button-bg-hover: var(--color-accent-hover);
  --button-fg:       #fff;
}

/* 深色主题只需重定义语义层，原始层与组件层自动跟随 */
[data-theme='dark'] {
  --color-bg:     var(--gray-900);
  --color-text:   var(--gray-50);
  --color-accent: var(--blue-600);
}

.button {
  background: var(--button-bg);
  color: var(--button-fg);
}
.button:hover { background: var(--button-bg-hover); }

/* --on 为空(初始)时代表"关"，设为 initial 之外的值代表"开" */
.card {
  --is-featured: ;                 /* 空格 = 关闭状态 */
  --featured-shadow: var(--is-featured) 0 8px 30px rgba(0,0,0,.15);
  box-shadow: var(--featured-shadow, none);
  border: var(--is-featured, 1px solid #eee);
}

/* 开启：给变量一个非空值，上面所有引用它的声明同时生效 */
.card.is-featured {
  --is-featured: initial;
}

.alert {
  /* 默认（info） */
  --bg: #e7f3ff;
  --fg: #0b5cad;
}
.alert[data-type='success'] { --bg: #e6f7ec; --fg: #1a7f37; }
.alert[data-type='warning'] { --bg: #fff8e6; --fg: #9a6700; }
.alert[data-type='danger']  { --bg: #ffebe9; --fg: #cf222e; }

.alert {
  background: var(--bg);
  color: var(--fg);
  border-left: 4px solid var(--fg);
  padding: 12px 16px;
}

:root {
  --step: 0.25rem;          /* 间距基准单位 4px */
  --ratio: 1.25;            /* 模块化字号比例（大三度） */
  --base-fs: 1rem;

  /* 间距阶梯：全部由 --step 派生 */
  --sp-1: calc(var(--step) * 1);
  --sp-2: calc(var(--step) * 2);
  --sp-3: calc(var(--step) * 3);
  --sp-4: calc(var(--step) * 4);
  --sp-6: calc(var(--step) * 6);
  --sp-8: calc(var(--step) * 8);

  /* 字号阶梯：按 ratio 逐级放大 */
  --fs-0: var(--base-fs);
  --fs-1: calc(var(--fs-0) * var(--ratio));
  --fs-2: calc(var(--fs-1) * var(--ratio));
  --fs-3: calc(var(--fs-2) * var(--ratio));

  /* 流式容器宽度：不小于 320，不大于 1200，中间跟随视口 */
  --container: clamp(320px, 90vw, 1200px);
}

.title    { font-size: var(--fs-3); margin-bottom: var(--sp-4); }
.subtitle { font-size: var(--fs-1); margin-bottom: var(--sp-2); }
.wrap     { width: var(--container); margin-inline: auto; }

/* 用变量做"响应式而不写媒体查询"的列数 */
.grid {
  --min-col: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col), 100%), 1fr));
  gap: var(--sp-4);
}
/* min(--min-col, 100%) 防止单列时超出容器溢出 */

/* 列表项依次淡入：每项延迟 = 索引 × 单位延迟 */
.list-item {
  opacity: 0;
  animation: fade-in 0.4s ease forwards;
  animation-delay: calc(var(--i) * 80ms);  /* --i 由行内 style 提供 */
}
@keyframes fade-in {
  to { opacity: 1; transform: translateY(0); }
}

<ul>
  <li class="list-item" style="--i: 0">第一项</li>
  <li class="list-item" style="--i: 1">第二项</li>
  <li class="list-item" style="--i: 2">第三项</li>
  <li class="list-item" style="--i: 3">第四项</li>
</ul>

/* 跟随鼠标的聚光灯卡片：JS 只更新两个变量，CSS 负责渲染 */
.spotlight {
  position: relative;
  background:
    radial-gradient(
      200px circle at var(--mx, 50%) var(--my, 50%),
      rgba(59,130,246,.25),
      transparent 60%
    ),
    #1e293b;
}

const card = document.querySelector('.spotlight');
card.addEventListener('pointermove', (e) => {
  const rect = card.getBoundingClientRect();
  card.style.setProperty('--mx', (e.clientX - rect.left) + 'px');
  card.style.setProperty('--my', (e.clientY - rect.top) + 'px');
});

// 1) 批量读取一组令牌，导出给 Canvas/图表库复用同一套配色
function readTokens(names) {
  const s = getComputedStyle(document.documentElement);
  return Object.fromEntries(
    names.map((n) => [n, s.getPropertyValue('--' + n).trim()])
  );
}
const theme = readTokens(['color-accent', 'color-bg', 'color-text']);

// 2) 用 rAF 节流高频更新（滚动/鼠标），避免掉帧
let ticking = false;
window.addEventListener('scroll', () => {
  if (ticking) return;
  ticking = true;
  requestAnimationFrame(() => {
    const p = window.scrollY / (document.body.scrollHeight - innerHeight);
    document.documentElement.style.setProperty('--scroll', p.toFixed(4));
    ticking = false;
  });
});

// 3) 从局部元素读取"就近生效"的变量值（体现级联）
const el = document.querySelector('.badge--danger');
const badgeBg = getComputedStyle(el).getPropertyValue('--badge-bg').trim();

.progress-bar {
  transform-origin: left;
  transform: scaleX(var(--scroll, 0));
  height: 3px;
  background: var(--color-accent);
}

/* 默认继承：父级定义，整棵子树可用 */
.theme-scope { --local-accent: #e91e63; }
.theme-scope .link { color: var(--local-accent); } /* 拿得到 */

/* 关闭继承：只在定义它的元素上生效，子元素取 initial-value */
@property --card-tint {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

/* 全站浅色，但"促销专区"内部强制深色，只需在容器上覆盖语义令牌 */
.promo-zone {
  --color-bg: #111827;
  --color-text: #f9fafb;
  --color-accent: #f59e0b;
  background: var(--color-bg);
  color: var(--color-text);
}

:root {
  color-scheme: light;
  --bg: #fff;
  --fg: #111;
}
/* 用户没手动选时，跟随系统深色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #111;
    --fg: #eee;
  }
}
/* 用户手动选择优先级最高 */
[data-theme='light'] { color-scheme: light; --bg: #fff; --fg: #111; }
[data-theme='dark']  { color-scheme: dark;  --bg: #111; --fg: #eee; }

body { background: var(--bg); color: var(--fg); }

// 三态切换：light → dark → 跟随系统(auto)
function cycleTheme() {
  const el = document.documentElement;
  const cur = el.getAttribute('data-theme');
  const next = cur === 'light' ? 'dark' : cur === 'dark' ? '' : 'light';
  if (next) { el.setAttribute('data-theme', next); localStorage.theme = next; }
  else { el.removeAttribute('data-theme'); localStorage.removeItem('theme'); }
}
// 首屏尽早应用，避免闪烁（放在 <head> 内联脚本）
const t = localStorage.theme;
if (t) document.documentElement.setAttribute('data-theme', t);

/* 一个高度可配置的按钮组件 */
.btn {
  /* —— 公开接口（有默认值，外部可覆盖） —— */
  --btn-bg: var(--color-accent, #3b82f6);
  --btn-fg: #fff;
  --btn-radius: 8px;
  --btn-pad-y: 10px;
  --btn-pad-x: 18px;
  --btn-font: 14px;
  --btn-hover-bg: var(--color-accent-hover, #2563eb);

  /* —— 内部实现（用上面的变量拼装） —— */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font);
  cursor: pointer;
  transition: background 0.2s;
}
.btn:hover { background: var(--btn-hover-bg); }

/* 定制变体：只覆盖公开接口，零重复样式 */
.btn--lg     { --btn-pad-y: 14px; --btn-pad-x: 26px; --btn-font: 16px; }
.btn--pill   { --btn-radius: 999px; }
.btn--danger { --btn-bg: #ef4444; --btn-hover-bg: #dc2626; }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--color-accent); }

.card {
  --card-pad: 20px;
  --card-radius: 12px;
  --card-bg: var(--color-bg, #fff);
  --card-shadow: 0 1px 3px rgba(0,0,0,.1);
  --card-accent: var(--color-accent, #3b82f6);

  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-top: 3px solid var(--card-accent);
}
.card--flat      { --card-shadow: none; border: 1px solid #eee; }
.card--compact   { --card-pad: 12px; }
.card--warning   { --card-accent: #f59e0b; }

.card-host {
  container-type: inline-size;
  container-name: card;
}
.card {
  --card-pad: 12px;
  --card-cols: 1;
  padding: var(--card-pad);
  display: grid;
  grid-template-columns: repeat(var(--card-cols), 1fr);
  gap: var(--card-pad);
}
/* 容器够宽时，同一组件自动变双列、加大内边距 */
@container card (min-width: 480px) {
  .card { --card-pad: 20px; --card-cols: 2; }
}

:root {
  --space: 4px;
}
/* 间距工具类：值 = 基准 × 档位 */
.p-1 { padding: calc(var(--space) * 1); }
.p-2 { padding: calc(var(--space) * 2); }
.p-3 { padding: calc(var(--space) * 3); }
.p-4 { padding: calc(var(--space) * 4); }
.p-6 { padding: calc(var(--space) * 6); }
.p-8 { padding: calc(var(--space) * 8); }

.gap-2 { gap: calc(var(--space) * 2); }
.gap-4 { gap: calc(var(--space) * 4); }

/* 密度切换：改一个 --space，全套工具类同时缩放 */
.compact { --space: 3px; }   /* 紧凑模式 */
.cozy    { --space: 6px; }   /* 宽松模式 */

:root {
  --grad-from: #6366f1;
  --grad-to: #ec4899;
  --grad-angle: 135deg;
}
.hero {
  background: linear-gradient(var(--grad-angle), var(--grad-from), var(--grad-to));
}

/* 多层阴影用变量组合，做"高度系统" */
:root {
  --elev-1: 0 1px 2px rgba(0,0,0,.08);
  --elev-2: 0 4px 8px rgba(0,0,0,.12);
  --elev-3: 0 10px 24px rgba(0,0,0,.16);
}
.dialog { box-shadow: var(--elev-3); }
.dropdown { box-shadow: var(--elev-2); }

/* 图标颜色跟随主题令牌，一处改色所有图标同步 */
.icon { fill: var(--color-accent, currentColor); }

<svg class="icon" viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2 2 22h20L12 2z" />
</svg>

.reset-scope {
  /* 清掉本作用域的某个令牌，让内部回退到 fallback 或继承 */
  --card-accent: initial;
}
.card { border-top: 3px solid var(--card-accent, #ccc); } /* 取到 #ccc */

:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal: 1050;
  --z-toast: 1080;
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
.modal { z-index: var(--z-modal); transition: opacity var(--dur-base) var(--ease-out); }

// 保留 Sass map 做编译期批量生成
$palette: (
  'primary': #3b82f6,
  'danger':  #ef4444,
);

// 桥接：把 Sass 值写进 CSS 变量，运行时就能改
:root {
  @each $name, $color in $palette {
    --color-#{$name}: #{$color};
  }
}

// 组件里用 CSS 变量（运行时可换肤），而不是直接用 $ 变量
.btn { background: var(--color-primary); }

.uploader {
  --p: 0;                 /* 上传进度 0~1，由 JS 更新 */
  background: linear-gradient(
    to right,
    var(--color-accent) calc(var(--p) * 100%),
    #e5e7eb 0
  );
}
.uploader[data-state='error']   { --color-accent: #ef4444; }
.uploader[data-state='success'] { --color-accent: #22c55e; }

// JS 只维护一个数值，视觉全交给 CSS
function setProgress(el, ratio) {
  el.style.setProperty('--p', ratio);
  el.dataset.state = ratio >= 1 ? 'success' : 'uploading';
}