CSS 变量

概述

CSS 变量已成为在 Web 上创建共享值的实际标准方式。它对于避免属性插值、类名重新生成以及减少 token 值的运行时评估非常有用。

示例

基本用法

使用css 属性来创建 css 变量

<Box css={{ "--font-size": "18px" }}>
  <h3 style={{ fontSize: "calc(var(--font-size) * 2)" }}>Hello</h3>
  <p style={{ fontSize: "var(--font-size)" }}>Hello</p>
</Box>

访问 token

使用完整的 token 路径来访问 token

<Box css={{ "--color": "colors.red.500" }}>
  <p style={{ color: "var(--color)" }}>Hello</p>
</Box>

以下是访问尺寸 token 的示例

<Box css={{ "--size": "sizes.10" }}>
  <p style={{ width: "var(--size)", height: "var(--size)" }}>Hello</p>
</Box>

响应式样式

使用响应式语法使 css 变量具有响应性

<Box css={{ "--font-size": { base: "18px", lg: "24px" } }}>
  <h3 style={{ fontSize: "calc(var(--font-size) * 2)" }}>Hello</h3>
  <p style={{ fontSize: "var(--font-size)" }}>Hello</p>
</Box>

颜色不透明度修饰符

在访问颜色 token 时，您可以使用不透明度修饰符来获取带有不透明度的颜色。要求是使用 {} 语法。

<Box css={{ "--color": "{colors.red.500/40}" }}>
  <p style={{ color: "var(--color)" }}>Hello</p>
</Box>

虚拟颜色

变量可以通过 colors.colorPalette.* 值指向一个虚拟颜色。这对于创建主题组件非常有用。

<Box colorPalette="blue" css={{ "--color": "colors.colorPalette.400" }}>
  <p style={{ color: "var(--color)" }}>Hello</p>
</Box>