CSS 변수 추출, 흩어진 --변수 한번에 모으기
긴 CSS 파일에서 --로 시작하는 커스텀 프로퍼티가 :root, 특정 클래스, 미디어쿼리 등 여러 곳에 흩어져 선언돼 있으면 눈으로 하나씩 찾기 어렵습니다.
이 글은 정규식 기반 추출기가 선언 위치와 상관없이 모든 --변수 선언을 하나의 표로 모으는 원리와, 표에서 이름·값으로 검색해 좁히고 var(--이름) 형식으로 바로 복사하는 방법을 정리합니다. 값이 중간에 끊겨 나오는 것처럼 자주 헷갈리는 매칭 규칙도 함께 다룹니다.
요약 ① 정규식은
--이름: 값패턴을:root·클래스·미디어쿼리 구분 없이 텍스트 전체에서 찾아 표로 모읍니다. ② 표에서 이름이나 값 일부를 검색창에 입력하면 목록이 실시간으로 좁혀집니다. ③ 복사 버튼을 누르면 값이 아니라var(--이름)형식으로 클립보드에 복사되어 바로 붙여 쓸 수 있습니다.
CSS 변수가 여러 곳에 흩어지는 이유
CSS 커스텀 프로퍼티는 한곳에만 몰아서 선언되지 않습니다. 기본값은 :root에 두고, 다크 모드용 재정의는 .dark나 [data-theme="dark"] 셀렉터 안에, 특정 화면 크기에서만 바뀌는 값은 @media 쿼리 안에 따로 두는 구성이 흔합니다.
컴포넌트 단위로 지역 변수를 선언하는 경우까지 더해지면 같은 파일 안에서도 선언이 위아래로 흩어집니다.
이 상태에서 지금 이 프로젝트에 어떤 변수가 몇 개 있는지, 같은 이름이 중복 선언돼 있지는 않은지를 확인하려면 파일 전체를 스크롤하며 --로 시작하는 줄을 하나씩 찾아야 합니다. 파일이 수백 줄을 넘거나 여러 CSS 파일에 나뉘어 있으면 눈으로 놓치는 변수가 생기기 쉽습니다.
도구 없이 직접 찾는 방법
CSS 커스텀 프로퍼티는 문법이 정해져 있어서 도구 없이도 같은 규칙으로 직접 찾을 수 있습니다. 핵심 패턴은 --이름 뒤에 콜론(:)이 오고, 그 뒤에 값이 오다가 세미콜론(;)이나 중괄호(})를 만나면 끝난다는 것입니다.
코드 에디터와 터미널에서 찾기
코드 에디터의 찾기 기능에서 정규식 모드를 켜고 --[a-zA-Z0-9-]+\s*: 를 검색하면 파일 안의 모든 변수 선언 줄이 하이라이트됩니다. 터미널에서는 다음 명령으로 이름과 값을 한 번에 뽑아낼 수 있습니다.
grep -oE -- '--[a-zA-Z0-9_-]+ *: *[^;{}]+' style.css
이 방식은 셀렉터가 :root인지 .dark인지 미디어쿼리 안인지를 구분하지 않고, 파일 텍스트 전체에서 --이름: 값 패턴만 훑습니다. 저희 도구가 쓰는 규칙과 같은 원리입니다.
브라우저 개발자 도구에서 확인하기
브라우저 개발자 도구에서 실제 적용된 값을 보고 싶다면 Elements 패널에서 :root 요소를 선택하고 Computed 탭에서 --를 검색하는 방법도 있습니다. 다만 이건 최종 계산값이라 소스 코드의 어느 셀렉터에 선언돼 있었는지는 알려주지 않습니다.
수십, 수백 줄짜리 CSS라면 이 작업을 매번 손으로 반복하기보다 한 번에 표로 확인하는 편이 빠릅니다. 저희 도구로 확인하기.
붙여넣은 CSS 텍스트에서 --변수 선언을 모두 찾아 표로 정리하고, 값은 var(--이름) 형식으로 바로 복사할 수 있습니다.
자주 헷갈리는 매칭 규칙
정규식은 --이름 뒤에 콜론이 바로 오는 패턴만 선언으로 인식하고, 값은 세미콜론·중괄호·줄바꿈을 만나면 즉시 멈춥니다. 이 규칙 때문에 특정 상황에서는 변수가 아예 안 잡히거나 값이 잘려서 나옵니다.
| 상황 | 결과 | 이유 |
|---|---|---|
| 값이 세미콜론 전에 줄바꿈됨 | 첫 줄까지만 추출됨 | 정규식이 줄바꿈에서 값 매칭을 멈춤 |
| 값(문자열 등) 안에 세미콜론 포함 | 세미콜론 앞부분만 추출됨 | 세미콜론을 값의 끝으로 판단 |
주석 안의 --이름: 값; 텍스트 | 그대로 추출됨 | 주석 여부를 구분하지 않고 텍스트 전체를 훑음 |
같은 이름이 :root와 .dark 등에 중복 선언 | 각각 별도 행으로 표시됨 | 셀렉터 구분 없이 순서대로 매칭 |
var(--이름)처럼 값 자리에서 참조만 함 | 추출되지 않음 | 이름 뒤에 콜론이 와야 선언으로 인식 |
특히 문자열 값 안의 세미콜론과 주석 안의 선언은 실제로 자주 걸리는 지점입니다. 추출 결과가 예상과 다르면 원본 CSS에서 그 변수 주변에 세미콜론이나 주석이 있는지부터 확인하는 것이 빠릅니다.
정리
- CSS 커스텀 프로퍼티는
:root, 클래스, 미디어쿼리 등 선언 위치와 무관하게--이름: 값패턴으로만 인식되고 추출됩니다. - 값은 세미콜론·중괄호·줄바꿈을 만나면 끊기므로, 값이 여러 줄에 걸치거나 세미콜론을 포함하면 잘려서 나올 수 있습니다.
- 주석 안의 선언도 텍스트로 인식돼 그대로 추출되고, 같은 이름이 중복 선언되면 모두 별도 행으로 표시됩니다.
- 검색창에 이름이나 값 일부를 입력하면 목록이 실시간으로 좁혀지고, 복사 버튼은 값이 아니라
var(--이름)형식을 복사합니다. - 도구 없이도 같은 원리의 정규식으로 직접 찾을 수 있지만, 파일이 길어질수록 표로 한 번에 보는 편이 빠릅니다.
붙여넣은 CSS 텍스트에서 --변수 선언을 모두 찾아 표로 정리하고, 값은 var(--이름) 형식으로 바로 복사할 수 있습니다.
자주 묻는 질문
:root 밖에 있는 변수도 추출되나요?
네. 정규식은 셀렉터를 구분하지 않고 텍스트 전체에서 --이름: 값 패턴만 찾습니다. 클래스 셀렉터나 @media 쿼리 안에 선언된 변수도 :root와 동일하게 표에 나타납니다.
검색창에는 무엇을 입력해야 하나요?
변수 이름이나 값의 일부 문자열을 입력하면 됩니다. 대소문자를 구분하지 않고 이름과 값 양쪽에서 일치하는 항목을 실시간으로 걸러 보여줍니다.
복사 버튼을 누르면 값이 그대로 복사되나요?
아닙니다. 복사되는 것은 원래 값이 아니라 var(--이름) 형식의 문자열입니다. 다른 CSS 규칙 안에 바로 붙여넣어 그 변수를 참조하는 용도로 만들어졌습니다.
SCSS의 $변수나 LESS의 @변수도 추출되나요?
추출되지 않습니다. 정규식이 찾는 패턴은 --로 시작하는 CSS 네이티브 커스텀 프로퍼티뿐입니다. $나 @로 시작하는 전처리기 변수는 대상이 아닙니다.