Sass는 SCSS로 쓰세요

Sass를 작성하는 문법은 두 가지입니다. 처음 Sass가 만들어질 때 함께 탄생한 Sass 문법과 대대적인 문법 개선으로 새로 추가된 SCSS 문법이 있습니다. 둘은 기능은 같지만, 문법적으로 모양새가 아주 다릅니다. 각 문법의 특징을 알아보면서 이유를 함께 살펴봅시다.

CSS 호환성을 갖춘 SCSS 문법

SCSS는 2010년 5월 버전 3(새창)으로 업그레이드하면서 갖춰진 새로운 문법 체계입니다. Sassy CSS 의미를 함축한 SCSS를 영어 그대로 번역하면 '멋진 CSS'라고 할 수 있지만, 기존 Sass 문법은 줄이고 CSS 문법은 그대로 살렸다는 의도를 함께 담은 'Sass한 CSS'로도 해석할 수 있습니다.

CSS 문법을 SCSS 문법 안에서 사용할 수 있으므로 CSS 호환성을 갖추게 되었습니다. 여기에는 CSS 핵과 IE의 filter와 같은 특정 브라우저 벤더용 문법도 포함하여 CSS가 지원하는 모든 문법과 기능을 SCSS에서 그대로 사용할 수 있습니다.

이런 완전 호환성 덕분에 모든 CSS 라이브러리를 그대로 이어서 사용할 수 있고, 기존 CSS를 SCSS로 전환하는 작업을 쉽게 시작할 수 있습니다.

SCSS 문법으로 작성한 CSS 규칙

#main p {
  color: #00ff00;
  width: 97%;
}

들여쓰기 기반 Sass 문법

들여쓰기 문법(새창) Sass Indented Syntax으로 부르는 예전 문법은 Sass²라고도 합니다. 이 문법은 CSS를 좀 더 간편히 작성하는 데 초점을 둡니다.

• 규칙 중첩을 나타내기 위해 중괄호 {}가 아니라 들여쓰기로 대신함.
• 속성을 구분하기 위해 세미콜론 ; 대신 줄 바꿈을 사용함.

Sass 문법으로 작성한 CSS 규칙

#main p
  color: #00ff00
  width: 97%

원조 Sass vs 후발주자 SCSS

읽기 쉽고 빨리 쓸 수 있어 Sass 문법을 더 좋아하는 사람들이 있습니다. 하지만 아래의 이유로 SCSS를 쓰기를 권장합니다.

• 공식 문법: 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여줍니다.
• 더 넓은 사용자: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하는 등 새로운 문법이 더욱 널리 쓰입니다.
• CSS 호환성: 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높입니다.
• 여러 줄 쓰기 지원: Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 반대로 여러 줄 쓰기를 지원하지 않습니다.³

Sass 문법은 멀티라인 작성 시 컴파일 에러가 발생합니다.

// 컴파일 에러 발생
$breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
)

// 꼭 한 줄에 작성해야 합니다
$breakpoints: ( sm: 480px, md: 768px, lg: 1024px )

Sass에서 SCSS로 변경하기

두 문법은 같은 기능을 가지고 있고 다른 확장자의 파일을 서로 불러올 수 있습니다. 즉 .sass 파일에서 .scss파일을 불러오거나 그 반대로 할 수 있습니다.

Sass는 버전 3으로 업그레이드하면서 기존 들여쓰기 문법 사용자를 위한 SCSS 문법(새창) 문서도 함께 제공했습니다. Sass에서 SCSS로 문법을 바꾸려는 분들은 참고해주세요.

sass-convert 커맨드라인 도구를 사용해서 한 문법에서 다른 문법으로 자동으로 파일을 변환할 수 있습니다.

Sass 문법을 SCSS 문법으로 변환하기

$ sass-convert style.sass style.scss