압축된 스타일시트 읽기
배포된 사이트에서 받은 style.min.css는 한 줄에 수만 자가 들어 있어 그대로는
읽을 수 없습니다. 여기에 붙여넣으면 규칙마다 줄을 나누고 들여쓰기를 넣어 줍니다.
남의 사이트에서 특정 스타일이 어디서 오는지 추적하거나, 오래된 프로젝트의 CSS를 이어받았을 때 씁니다.
옵션
| 옵션 | 하는 일 |
|---|---|
| 선택자마다 줄 바꾸기 | h1, h2, h3 {를 세 줄로 나눕니다. 선택자가 긴 규칙을 볼 때 편합니다 |
| 규칙 사이에 빈 줄 | 규칙 사이를 한 줄 띄웁니다. 규칙 수가 적을 때 읽기 좋습니다 |
주석은 돌아오지 않습니다
정렬은 들여쓰기와 줄바꿈을 복원할 뿐입니다. 압축 과정에서 지워진 주석과 원래 작성자가
두었던 빈 줄은 복원할 수 없습니다. 소스맵(.css.map)이 함께 배포되어 있다면
그쪽이 원본에 훨씬 가깝습니다.
이 정렬기에 대해
브라우저 안에서 js-beautify(MIT)를 돌립니다. beautifier.io가 쓰는 것과 같은 엔진이고, 입력은 서버로 전송되지 않습니다.
SCSS도 정렬되나요?
중첩된 SCSS/LESS도 대체로 잘 정렬됩니다. 다만 이 엔진은 CSS 문법을 기준으로 하므로 복잡한 믹스인이나 제어문에서는 결과가 어색할 수 있습니다.
속성을 가나다순으로 정렬해 주나요?
하지 않습니다. 선언 순서는 CSS에서 의미가 있습니다 — 같은 속성을 두 번 쓰면 뒤엣것이 이깁니다. 순서를 바꾸면 결과가 달라질 수 있어 건드리지 않습니다.