CSS 변수

CSS 변수 (CSS Variables)

토큰을 인식하는 CSS 변수를 Chakra UI에서 사용하는 방법을 알려드려요. 공유 값을 만들고 토큰을 효율적으로 접근하는 데 편리해요.

출처: 문서

본문

개요

CSS 변수는 웹에서 공유 값을 만드는 사실상의 표준이 되었어요. prop 보간(interpolation), 클래스네임 재생성, 토큰 값의 런타임 평가를 피할 수 있어서 매우 유용해요.

예시

기본

css prop을 사용해서 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>

토큰 접근

전체 토큰 경로를 사용해서 토큰에 접근해요.

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

크기 토큰에 접근하는 예시예요.

<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>

색상 투명도 수정자

색상 토큰에 접근할 때 투명도 수정자를 사용해서 투명도가 있는 색상에 접근할 수 있어요. {} 문법을 사용해야 해요.

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

가상 색상 (Virtual Color)

변수는 colors.colorPalette.* 값을 통해 가상 색상을 가리킬 수 있어요. 테마 컴포넌트를 만들 때 유용해요.

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