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로 전환하는 작업을 쉽게 시작할 수 있다.

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

들여쓰기 기반 Sass 문법

들여쓰기 문법 ^{Sass Indented Syntax}으로 부르는 예전 문법은 Sass²라고도 한다. 이 문법은 CSS를 좀 더 간편히 작성하는 데 초점을 둔다.

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

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

원조 Sass vs 후발주자 SCSS

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

• 공식 문법: 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여준다.
• 더 넓은 사용자: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하는 등 새로운 문법이 더욱 널리 쓰인다.
• CSS 호환성: 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높인다.
• 여러 줄 쓰기 지원: 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-convert style.sass style.scss