SCSS 포매터

SCSS 포매터가 하는 일

SCSS에서는 규칙을 중첩하고, 값을 $variables에 저장하고, @mixin으로 블록을 재사용하고, 설정을 맵에 담을 수 있습니다. 이런 기능 덕분에 파일은 금방 커지고, 여러 사람이 같은 스타일시트를 고치기 시작하면 들여쓰기가 흐트러집니다. 누구는 color:$brand라고 쓰고 누구는 color : $brand ;라고 쓰며, 중첩 블록의 깊이는 제각각이 됩니다.

이 SCSS 포매터는 모든 중첩 단계를 같은 방식으로 들여쓰고, 선언을 한 줄에 하나씩 놓으며, 콜론과 중괄호 주변의 띄어쓰기를 일관되게 맞춥니다. SCSS 파서를 갖춘 Prettier 3를 사용하며 모든 작업이 브라우저 안에서 이루어집니다.

사용 방법

1. 왼쪽 상자에 SCSS를 붙여넣습니다. 붙여넣는 순간 정렬됩니다.
2. 파일 열기를 눌러 .scss 파일을 불러오거나, 예시를 눌러 예제를 볼 수도 있습니다.
3. 들여쓰기를 고릅니다. 공백 2칸, 공백 4칸, 탭 중에서 선택합니다.
4. 줄 너비를 고릅니다. 긴 선택자 목록, 맵, include 인자는 이 너비를 넘으면 줄이 바뀝니다.
5. 스타일 가이드가 작은따옴표를 선호한다면 작은따옴표를 켭니다.
6. 포맷을 누르거나, 입력 상자에서 Ctrl+Enter를 누릅니다.
7. 복사를 누르거나, 다운로드를 눌러 .scss 파일로 저장합니다.

처음 포맷한 뒤에는 입력하는 대로 결과가 따라옵니다. 문제가 있으면 상자 아래에 2행 3열: Unclosed block 같은 메시지가 나타나고, 입력에서 보기를 누르면 커서가 그 위치로 갑니다.

정렬 전과 후

변수, 믹스인, 중첩 규칙이 들어간 압축된 SCSS 코드입니다.

$brand:#3b82f6;@mixin card($pad:16px){padding:$pad;border-radius:8px}.nav{display:flex;gap:1rem;a{color:$brand;&:hover{text-decoration:underline}}.btn{@include card(12px)}}

공백 2칸으로 포맷한 결과입니다.

$brand: #3b82f6;
@mixin card($pad: 16px) {
  padding: $pad;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 1rem;
  a {
    color: $brand;
    &:hover {
      text-decoration: underline;
    }
  }
  .btn {
    @include card(12px);
  }
}

중첩 단계마다 들여쓰기가 하나씩 늘어나므로 &:hover가 .nav 안의 링크에 속한다는 것을 한눈에 알 수 있습니다.

Sass 맵은 키마다 한 줄씩, 여러 줄로 펼쳐집니다.

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

작은따옴표를 켜면 @use "sass:math";가 @use 'sass:math';로 바뀝니다. 한 줄 주석은 원래 있던 자리에 그대로 남습니다.

// Header styles
.header {
  .logo {
    width: 120px;
  }
}

오류와 한계

포매터는 파일을 출력하기 전에 먼저 파싱해야 합니다. 가장 흔한 문제는 닫는 중괄호 누락입니다. 다음 입력의 경우

.nav {
  a { color: red;

메시지는 2행 3열: Unclosed block(닫히지 않은 블록)이며, 닫히지 않은 a {를 가리킵니다.

알아 둘 점은 다음과 같습니다.

• 이 도구는 의미가 아니라 문법을 확인합니다. 정의되지 않은 변수나 존재하지 않는 믹스인은 보고되지 않습니다. 그런 문제는 Sass 컴파일러가 찾아냅니다.
• 속성 순서를 바꾸거나 선택자를 정렬하지 않습니다. 작성한 순서가 유지됩니다.
• 들여쓰기 방식의 .sass 문법은 지원하지 않습니다. 먼저 SCSS로 변환하거나, 그 문법을 지원하는 에디터에서 정렬하세요.
• 이 페이지에는 압축(Minify) 버튼이 없습니다. 브라우저는 CSS만 실행하므로 SCSS를 압축하는 것은 의미가 없습니다. Sass로 컴파일한 다음 CSS 결과물을 압축하세요.

더 깔끔한 SCSS를 위한 팁

• 중첩은 얕게 유지하세요. 깊은 중첩은 길고 깨지기 쉬운 선택자를 만들기 때문에, 스타일 가이드에서는 보통 3단계를 한계로 둡니다.
• 변수와 맵은 _tokens.scss 같은 별도 partial 파일에 두고 @use로 불러오세요.
• 커밋하기 전에 포맷하세요. 그렇지 않으면 사소한 띄어쓰기 변경이 코드 리뷰에서 실제 변경 사항과 뒤섞입니다.
• 일반 CSS 결과물을 다루고 있다면 CSS 포매터로 압축까지 할 수 있습니다.

SCSS를 정렬하는 다른 방법

• VS Code: Prettier 확장을 설치하고 파일을 연 다음 Format Document(문서 서식)를 실행합니다. 단축키는 Windows에서 Shift+Alt+F, macOS에서 Shift+Option+F입니다.
• 명령줄: npx prettier --write "src/**/*.scss"는 폴더 안의 모든 SCSS 파일을 정렬합니다.
• JetBrains IDE: WebStorm 같은 IDE에는 Reformat Code 기능이 내장되어 있고, 프로젝트에 Prettier가 설치되어 있으면 Prettier를 쓸 수도 있습니다.

설치할 것이 없고 코드가 기기 밖으로 나가지 않으므로, 이슈 티켓이나 CodePen, 동료의 메시지에서 받은 코드 조각을 빠르게 정리할 때 편합니다. 이 스타일을 쓰는 마크업은 HTML 포매터에서, 스크립트는 자바스크립트 포매터에서 정렬해 보세요.