0Pricing
CSS Academy · 课时

备用值与 var()

为 var() 提供备用值，以应对自定义属性未定义或无效的情况。

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

var() 回退语法

var() 函数接受一个可选的第二个参数作为回退值，在未定义自定义属性时使用该值。

<button class="button">Fallback: royalblue</button>

回退值的生效条件

以下情况下会使用回退值：

  • 属性未在作用域中定义
  • 属性的值为 initial
  • 属性在其上下文中声明了无效值

多层回退值

嵌套使用 var() 调用，以串联多个回退层级：

<p class="text">Falls through two levels to #3b82f6</p>

回退值可以是任意值

回退值可以是该属性接受的任何有效值，包括其他变量、计算值或字面值：

<div class="card">16px / 50%</div>

initial 关键字

将自定义属性设置为 initial 后，其效果就像从未设置过该属性一样。将它与回退值结合使用，可以让组件选择不继承某个自定义属性。

<div class="no-theme">
  <button class="button">Falls back to gray</button>
</div>

保证触发回退的无效值

将 initial 用作自定义属性值，可以保证触发回退值。这种方式可以在 CSS 中创建可选的功能开关。

自定义属性与 @property

@property 规则（Houdini）可以注册带类型的自定义属性，并为其保证一个初始值。这比依赖回退值更加可靠。

<div class="track">
  <div class="bar"></div>
</div>

为动画安全值提供回退

通过提供一个可以作为过渡起点的安全回退值，确保即使未设置自定义属性，过渡效果也能正常工作：

<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>

调试缺失的变量

如果缺少自定义属性且未提供回退值，该属性会计算为其初始值（通常是 initial 关键字）。对于颜色，这可能会产生意外的透明或黑色结果。请始终为关键属性添加回退值。

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

自定义属性的值本身也可以引用其他自定义属性，从而创建令牌链：

<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>

回退值与特异性

回退值与特异性无关——它们只在所引用的自定义属性未定义或无效时生效。特异性决定哪条规则设置自定义属性，而不是哪个回退值胜出。

快速检查

当 --theme-text 未定义时，color: var(--theme-text, #111) 会执行什么操作？

回顾

var(--name, fallback) 会在自定义属性未定义时提供回退值。可以嵌套回退值，以实现多级回退。使用 @property 为自定义属性指定类型，并保证其具有初始值。对于关键的视觉属性，请始终提供回退值。

常见问题解答

「备用值与 var()」课时是免费的吗？

是的 — 「备用值与 var()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「备用值与 var()」这节课中我会学到什么？

为 var() 提供备用值，以应对自定义属性未定义或无效的情况。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「备用值与 var()」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 声明和使用自定义属性
  2. 备用值与 var()
  3. 将变量限定到组件作用域
  4. 使用 JavaScript 更新变量
← 返回 CSS Academy