CSS 변수(--var) 선언문 자동 추출기
스타일시트 소스 코드 내에서 선언된 모든 CSS Custom Properties (--변수명: 값) 패턴을 분석하여 목록화
웹 프로젝트 CSS 파일 내에서 선언되어 사용되는 테마 색상 및 공통 스타일 변수(`--primary-color` 등) 선언문들을 일괄 추적하여 표 형태로 보기 좋게 정리해 주는 추출 도구입니다. 별도의 프로그램 설치나 복잡한 회원가입 없이 웹 브라우저에서 즉시 실행되며, 입력한 데이터는 외부 서버로 유출되지 않고 안전하게 로컬 환경에서 처리됩니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 변수를 추출할 CSS 코드를 전체 입력 폼에 넣습니다.
- 변수 추출하기 실행 후 추출된 이름과 값을 테이블로 확인합니다.
- 특정 변수를 프로젝트 코드에서 쓰기 쉽도록 우측 복사 버튼을 클릭해 복사합니다.
자주 묻는 질문
- 추출한 변수들을 자바스크립트나 CSS에서 어떻게 활용하나요?
- 우측 복사 버튼을 누르면 해당 변수를 사용하기 위한 `var(--변수명)` 포맷으로 클립보드에 자동 복사되므로, CSS 내에 바로 붙여넣어 재사용할 수 있습니다.
- :root가 아니라 .dark-mode처럼 특정 클래스 안에 선언된 변수도 추출되나요?
- 네, :root뿐 아니라 어떤 선택자 안에 선언되어 있든 -- 로 시작하는 CSS 커스텀 프로퍼티 선언 패턴 자체를 찾아 추출하므로, .dark-mode나 [data-theme="dark"] 같은 특정 클래스나 선택자 안에 정의된 테마 변수도 동일하게 목록에 포함됩니다. 다만 어떤 선택자에 속해 있었는지 구분 없이 변수명과 값만 나열되므로, 같은 이름의 변수가 여러 선택자에 다른 값으로 선언돼 있다면 결과에 여러 번 나타날 수 있습니다.
- :root가 아니라 .dark-mode처럼 특정 클래스 안에 선언된 변수도 추출되나요?
- 네, :root뿐 아니라 어떤 선택자 안에 선언되어 있든 -- 로 시작하는 CSS 커스텀 프로퍼티 선언 패턴 자체를 찾아 추출하므로, .dark-mode나 [data-theme="dark"] 같은 특정 클래스나 선택자 안에 정의된 테마 변수도 동일하게 목록에 포함됩니다. 다만 어떤 선택자에 속해 있었는지 구분 없이 변수명과 값만 나열되므로, 같은 이름의 변수가 여러 선택자에 다른 값으로 선언돼 있다면 결과에 여러 번 나타날 수 있습니다.