CSS 변수 생성기

출력 형태

행을 몇 개 입력하든 결과는 :root 블록 하나입니다. 그룹 순서(색상, 타이포그래피, 간격, 테두리 반경)와 그룹 안의 행 순서대로 선언이 이어지고, 이름이 빈 행은 빠집니다. 값은 앞뒤 공백만 지우고 입력한 그대로 쓰며, 올바른 CSS인지는 확인하지 않습니다. 처음 열었을 때 채워져 있는 행을 그대로 복사하면 다음과 같습니다.

:root {
  --primary: #3b82f6;
  --secondary: #6366f1;
  --bg: #ffffff;
  --text: #111827;
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

예시: KRDS 토큰 이름 그대로 쓰기

대한민국 정부 디자인 시스템 KRDS는 npm 패키지 krds-uiux로 토큰 파일을 배포합니다. 1.1.0 버전의 resources/css/token/krds_tokens.css에는 --krds-color-light-primary-50: #256ef4;, --krds-color-light-primary-60: #0b50d0; 같은 줄이 있습니다. 서비스 화면에서 주요 색 두 개만 가져다 쓰고 싶다면 접두사를 --krds-color-light로 두고 두 행을 입력합니다.

:root {
  --krds-color-light-primary-50: #256ef4;
  --krds-color-light-primary-60: #0b50d0;
}

접두사 끝에 하이픈이 없어도 도구가 하나를 넣기 때문에 KRDS 파일과 같은 이름이 나옵니다.

KRDS의 rem 값은 루트 글꼴 크기 10px 기준

간격 토큰도 같은 방식으로 옮길 수 있지만 단위에 주의해야 합니다. krds_tokens.css에는 --krds-number-8: 1.6rem;, --krds-number-10: 2.4rem;처럼 rem 값이 있고, 패키지의 common.css는 --krds-font-size-base: 62.5%;를 정의하고 html { font-size: var(--krds-font-size-base); }로 루트에 적용합니다. 브라우저 기본 글꼴 크기가 16px일 때 루트는 10px로 계산되어 1.6rem이 16px, 2.4rem이 24px입니다. 접두사를 --krds-number-로 두고 이름에 숫자만 넣으면 다음과 같습니다.

:root {
  --krds-number-8: 1.6rem;
  --krds-number-10: 2.4rem;
}

이 블록을 루트 글꼴 크기가 16px로 설정된 프로젝트에 그대로 붙이면 1.6rem이 25.6px로 계산되어 간격이 1.6배로 커집니다. html에 62.5%도 함께 지정하거나, CSS 단위 변환기에서 루트 글꼴 크기를 10으로 두고 px 값으로 바꾼 뒤 입력하세요.

한글 변수명

한글 이름도 쓸 수 있습니다. CSS Syntax Level 3은 U+3001부터 U+D7FF까지의 문자를 식별자에 쓸 수 있는 비 ASCII 문자로 정하고 있으며 한글 음절(U+AC00–U+D7A3)이 이 범위에 들어갑니다. 이름 안의 공백은 하이픈으로 바뀌므로 본문 크기는 --본문-크기가 됩니다.

:root {
  --주색: #256ef4;
  --본문-크기: 1.7rem;
}

다만 다른 사람이 var(--본문크기)처럼 하이픈 없이 쓰면 값을 읽지 못하므로 이름 규칙은 팀에서 미리 정해 두는 편이 좋습니다.

제한 사항

• 결과는 :root 블록 하나뿐입니다. 다크 테마, 미디어 쿼리, @property 등록, JSON이나 Sass 형식은 만들지 않으니 필요하면 블록을 직접 추가합니다.
• 그룹 네 개는 고정이며 그룹 안에서만 행을 추가하거나 지울 수 있습니다.
• 값은 검사하지 않습니다. 같은 이름의 행이 두 개면 둘 다 출력되고, CSS 규칙에 따라 뒤의 선언이 적용됩니다.
• 이름은 대소문자를 구분합니다. var(--Primary)로는 --primary를 읽을 수 없습니다.
• var()의 대체 값은 변수가 정의되지 않았을 때만 쓰입니다. --gap: red처럼 쓸 수 없는 값이 들어 있으면 padding: var(--gap, 8px)은 8px로 돌아가지 않고 계산값 단계에서 무효가 되어 초기값 0이 됩니다(CSS Custom Properties Level 1 §3.1).
• 색상 견본은 3자리·6자리 HEX만 따라갑니다. rgb()나 oklch()도 정확히 복사되지만 견본 색은 바뀌지 않습니다.
• 도구 안에서 Ctrl/⌘+L을 누르면 접두사, 변수명, 값이 모두 비워지고 행과 색상 견본의 색은 남습니다.

커스텀 속성과 var()는 Chrome 49, Firefox 31, Safari 9.1, Edge 15부터 지원됩니다(MDN 호환성 데이터). 한 색으로 단계별 색상을 만들려면 색상 쉐이드 생성기를, 화면 너비에 따라 변하는 크기는 CSS clamp() 계산기의 값을 붙여 넣어 쓸 수 있습니다.