SCSS 문법: Sass의 두 가지 표기법

Sass에는 SCSS와 들여쓰기(Indented) 문법, 두 가지 표기법이 있어요. 둘 중 하나로 써도 다른 문법으로 된 파일을 서로 불러올 수 있으니, 어떤 걸 쓸지는 팀과 함께 정하면 돼요. 실무에서는 괄호와 세미콜론을 쓰는 SCSS가 압도적으로 많이 쓰입니다.

출처: Sass: Syntax (공식 문서)

SCSS

SCSS는 .scss 확장자를 쓰는 문법이에요. 몇몇 사소한 예외를 빼면 CSS의 상위 집합(superset)이라서, 유효한 CSS는 거의 모두 유효한 SCSS이기도 해요. CSS와 모양이 비슷해서 익숙해지기 쉽고, 그래서 가장 인기가 많습니다. SCSS는 이렇게 생겼어요.

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover {
    cursor: pointer;
  }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

들여쓰기(Indented) 문법

들여쓰기 문법은 Sass가 처음 만들어진 때부터 있던 문법이라 .sass 확장자를 써요. 그래서 가끔 그냥 "Sass"라고도 부릅니다. 지원하는 기능은 SCSS와 똑같지만, 중괄호와 세미콜론 대신 들여쓰기로 문서의 구조를 표현해요.

대략적으로, CSS나 SCSS에서 중괄호를 쓰던 자리에서는 들여쓰기를 한 단계 더 깊게 해 주면 되고, 문장이 끝날 수 있는 위치에서 줄이 끝나면 그게 곧 세미콜론 역할을 해요. SCSS에 없는 몇 가지 차이점이 더 있는데, 이 문서 전반에 걸쳐 따로 설명해 둡니다. 들여쓰기 문법은 이렇게 생겼어요.

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

여러 줄에 걸친 문장

들여쓰기 문법에서도 문장이 여러 줄에 걸쳐 있을 수 있어요. 단, 줄바꿈이 문장이 끝나면 안 되는 위치에서 일어나야 합니다. 괄호 안이나 다른 대괄호 안, 또는 Sass 고유 @-rule의 키워드 사이가 대표적이에요.

.grid
  display: grid
  grid-template: (
    "header" min-content
    "main" 1fr
  )

@for
  $i from
  1 through 3
    ul:nth-child(3n + #{$i})
      margin-left: $i * 10

SCSS 문법: Sass의 두 가지 표기법