올인원 CSS 도구 상자: 포맷/정렬, 축소/압축, 구문 검증, SCSS/Sass & LESS를 CSS로 컴파일, CSS를 SCSS 또는 LESS로 역변환. 모든 처리는 브라우저에서 로컬로 이루어집니다 — 데이터는 어떤 서버로도 업로드되지 않습니다.
모드:
입력 CSS / SCSS / LESS / SASS
출력
사용법: CSS/SCSS/LESS/SASS를 왼쪽 텍스트 영역에 붙여넣고, 모드를 고르고, 처리를 누르세요(그냥 입력해도 됩니다 — 입력 시 자동 처리).
각 모드의 동작
CSS 포맷: CSS를 일관된 들여쓰기(2/4칸 또는 탭), 한 줄에 한 속성으로 정렬합니다. @media, @keyframes, @supports 같은 중첩 at-규칙을 처리합니다. 주석(/* */와 한 줄 주석 모두)을 유지합니다. 들여쓰기 선택으로 2칸, 4칸, 탭을 전환하세요.
축소: 불필요한 공백, 주석, 중복 문자를 모두 제거해 가장 압축된 CSS를 만듭니다. 파일 크기와 대역폭을 줄이는 프로덕션 배포에 적합합니다. 통계 표시줄에서 압축률을 확인하세요.
검증: CSS를 구문 분석해 오류를 검사합니다. 정확한 행과 열 번호로 파싱 오류를 보고합니다. 통계도 표시합니다: 규칙, 선택자, 선언, at-규칙 수.
SCSS 포맷: SCSS/Sass 스타일시트를 일관된 들여쓰기로 재정렬합니다. SCSS 고유 구문 전부를 처리합니다: $변수, @mixin/@include, @extend, @if/@for/@each 제어 흐름, #{$var} 보간, // 한 줄 주석. 중첩 선택자 구조를 유지하고 중첩 블록을 올바르게 들여씁니다. 들여쓰기 선택기를 바꾸면 2칸, 4칸 또는 탭 사이를 전환할 수 있습니다.
LESS 포맷: LESS 스타일시트를 일관된 들여쓰기로 재정렬합니다. LESS 고유 구문 전부를 처리합니다: @변수, 매개변수 믹스인, 가드(when), @{var} 보간, 병합, // 한 줄 주석. 중첩 선택자 구조를 유지하고 중첩 블록을 올바르게 들여씁니다. 들여쓰기 선택기를 바꾸면 2칸, 4칸 또는 탭 사이를 전환할 수 있습니다.
SCSS → CSS: 공식 Dart Sass 컴파일러(v1.102)로 SCSS/Sass 스타일시트를 일반 CSS로 컴파일합니다. 변수($var), 중첩, 믹스인(@mixin, @include), 함수, @extend, @if/@for/@each 제어 흐름, 최신 Sass 모듈(@use, @forward)을 지원합니다. Sass 컴파일러(약 5.4 MB)는 이 모드를 처음 쓸 때 지연 로드됩니다.
LESS → CSS: LESS 스타일시트를 일반 CSS로 컴파일합니다. 변수(@var), 중첩, 믹스인, 매개변수 믹스인, 연산, 함수, 가드, 가져오기(@import)를 지원합니다. 컴파일러(약 150 KB)는 이 모드를 처음 쓸 때 지연 로드됩니다.
SASS → CSS:들여쓰기 SASS 구문(.sass 파일, 중괄호 없음, 세미콜론 없음)을 Dart Sass로 일반 CSS로 컴파일합니다. 들여쓰기 SASS는 중괄호 대신 의미 있는 공백을 써서 더 간결합니다. 같은 Dart Sass 컴파일러(약 5.4 MB)가 SCSS와 들여쓰기 SASS 구문을 모두 처리합니다.
CSS → SCSS: 표준 CSS를 자동 중첩 리팩터링으로 SCSS 구문으로 변환합니다. BEM 비슷한 패턴을 감지해 .parent-child 선택자를 &-child 중첩 블록으로 옮깁니다. 자손 선택자를 중첩 규칙으로, 의사 클래스 선택자를 &:state로 변환하고, 반복되는 CSS 사용자 지정 속성을 SCSS $변수로 추출합니다. CSS가 평평하고 반복적이라면 이 도구가 더 깔끔한 중첩 SCSS로 리팩터링해 줍니다.
CSS → LESS: 표준 CSS를 자동 중첩 리팩터링으로 LESS 구문으로 변환합니다. CSS→SCSS와 같은 중첩 방식입니다: 반복되는 부모 패턴, 자손 선택자, 의사 클래스를 감지합니다. 반복되는 CSS 사용자 지정 속성을 LESS @변수로 추출합니다. 출력은 깔끔한 중첩 LESS 코드입니다.
캐스케이드, 명시도, 스타일이 충돌하는 이유
여러 규칙이 같은 요소를 겨냥하면 명시도가 승자를 가립니다: 인라인 스타일이 id를 이기고, id가 클래스를 이기고, 클래스가 요소 선택자를 이기고, 소스 순서가 동점을 깹니다. !important 플래그는 이 산술을 뒤엎습니다 — 그리고 다음 재정의를 그만큼 어렵게 만듭니다.
