Frontend Academy · 课时

CSS 自定义属性：声明与更新

在 :root 中使用 -- 声明变量，使用 var() 引用它们，并通过 JavaScript 动态更新变量，实现实时主题设置。

CSS 自定义属性：声明与更新 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

回顾：声明与作用域

CSS 自定义属性可以在任意元素上使用--前缀进行声明。在:root上声明的属性可以全局使用。子元素会继承这些值，也可以在本地覆盖它们。

:root {
  --spacing: 8px;
  --color-brand: #6366f1;
}
.card {
  --spacing: 12px; /* local override for .card and its children */
  padding: var(--spacing);
}

通过 JavaScript 实现实时更新

自定义属性可以在运行时更改。请使用element.style.setProperty('--name', value)进行元素级覆盖，或者更新 :root 上的全局变量，以立即影响所有使用方。

// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');

// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');

在 JS 中读取自定义属性值

请使用getComputedStyle(element).getPropertyValue('--name').trim()读取自定义属性。它读取的是计算后的值（层叠后的值），而不只是内联值。

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-brand')
  .trim();
console.log(brandColor); // '#6366f1'

为自定义属性添加动画

浏览器可以使用 @property（Houdini）对自定义属性进行插值；将它们与 calc() 结合时，也可以在过渡中使用。没有 @property 时，浏览器无法直接在变量值之间创建过渡。

@property — 注册自定义属性

CSS @property规则会为自定义属性注册类型、初始值和继承规则。注册后的属性可以原生支持过渡和动画。

@property --brand-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.card {
  opacity: var(--brand-opacity);
  transition: --brand-opacity 0.3s;
}
.card:hover {
  --brand-opacity: 0.7;
}

使用自定义属性构建设计令牌系统

设计令牌的模式是：将所有设计决策存储为自定义属性。组件使用令牌，而不是硬编码的值。更改令牌后，更改会传播到所有使用位置。

:root {
  /* Colour tokens */
  --token-primary: #6366f1;
  --token-primary-hover: #4f46e5;
  --token-surface: #ffffff;
  --token-on-surface: #1f2937;

  /* Spacing tokens */
  --token-space-sm: 8px;
  --token-space-md: 16px;
  --token-space-lg: 24px;
}

响应式自定义属性

请在媒体查询中更改自定义属性的值。使用这些变量的组件会自动适应，这比针对每个断点分别编写组件规则更加简洁。

:root {
  --container-max: 640px;
  --font-size-base: 15px;
}
@media (min-width: 1024px) {
  :root {
    --container-max: 1280px;
    --font-size-base: 16px;
  }
}

在 calc() 中使用自定义属性

请在 calc() 中使用变量来计算派生的间距和尺寸。这样可以创建一个协调一致且数学上统一的尺寸系统。

:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); }  /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); }  /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */

为多个品牌设置主题

请根据不同的数据属性设置不同的主题令牌。一个页面可以通过白标方式支持多个主题。

[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }

在 SVG 中使用自定义属性

填充和描边等 SVG 属性可以使用自定义属性。这样您无需修改 SVG 标记，就能通过 CSS 为图标设置主题。

/* CSS */
:root { --icon-fill: #6366f1; }

/* SVG inline or referenced */
svg { fill: var(--icon-fill); }

调试自定义属性

在 Chrome DevTools 中选择一个元素，然后在“计算值”选项卡中查看自定义属性的值。“样式”面板会显示每个变量的声明位置。“继承”部分会显示来自父元素的变量。

快速检查

哪个 JavaScript 方法可以更新元素上的 CSS 自定义属性？

回顾：深入了解 CSS 自定义属性

在 :root 上声明全局属性；在后代元素上覆盖以实现本地作用域。请从 JS 中使用 style.setProperty 进行更新。请使用 getComputedStyle 读取。@property 可以启用原生过渡。请将它们用作设计令牌，以建立唯一事实来源。在媒体查询中覆盖它们，以实现响应式令牌。

常见问题解答

「CSS 自定义属性：声明与更新」课时是免费的吗？

是的 — 「CSS 自定义属性：声明与更新」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「CSS 自定义属性：声明与更新」这节课中我会学到什么？

在 :root 中使用 -- 声明变量，使用 var() 引用它们，并通过 JavaScript 动态更新变量，实现实时主题设置。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「CSS 自定义属性：声明与更新」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy