도구 실행
CSS 스타일시트에서 사용된 커스텀 속성(CSS 변수)의 선언과 참조 관계를 검사하는 도구입니다. 텍스트 입력란에 분석할 CSS 코드를 입력하면 두 개의 하이픈(--)으로 시작하는 변수 선언을 찾아내어 이름과 설정값을 정리합니다. 동시에 코드 전반에 걸쳐 var() 형식으로 호출된 참조 횟수를 변수별로 계산하고, 선언만 되고 실제로는 참조되지 않은 미사용 변수 목록과 전체 개수 통계를 함께 화면에 보여줍니다. 복잡한 스타일시트를 리팩터링하거나 사용하지 않는 디자인 토큰을 점검할 때 편리하게 활용할 수 있습니다.
사용 방법
- 분석할 CSS 코드를 CSS 입력란에 입력하거나 붙여넣습니다.
- 변수 분석 버튼을 누릅니다.
- 결과 화면에서 감지된 변수 목록, 변수별 var() 참조 횟수, 미참조 변수 현황을 확인합니다.
예시
- :root { --primary-color: #007bff; --spacing: 16px; } .btn { color: var(--primary-color); } 코드를 입력하면 --primary-color(참조 1회)와 미참조 변수인 --spacing(참조 0회)이 구분되어 집계됩니다.
- :root { --font-main: 'Noto Sans KR', sans-serif; --font-size: 1rem; } body { font-family: var(--font-main); font-size: var(--font-size); } 코드를 입력하면 변수 2개 선언 및 각 변수의 1회 참조 결과가 표시됩니다.
자주 묻는 질문
어떤 형식의 CSS 변수를 감지하나요?
두 개의 하이픈(--)으로 시작하고 콜론, 설정값, 세미콜론 순서로 작성된 유효한 사용자 정의 속성 선언을 추출합니다.
var() 함수 안에 대체 값이 포함된 경우에도 집계되나요?
네, var(--main-color, #333)처럼 괄호 안에 fallback 값이 함께 전달되어도 해당 변수명을 인식하여 참조 횟수에 반영합니다.
입력란이 비어 있으면 어떻게 처리되나요?
CSS 코드가 입력되지 않은 상태에서는 분석이 실행되지 않으며 코드를 입력하라는 메시지가 표시됩니다.
미참조 변수 목록은 무엇을 의미하나요?
스타일시트 내에 변수 이름과 값은 정의되었으나, var() 구문을 통해 단 한 번도 사용되지 않은 변수를 뜻합니다.