문서의 이전 판입니다!


Sass (SCSS)

웹표준에서는 CSS만 동작함. Sass 는 CSS (Cascading Style Sheet)의 확장이다.

SASS는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다. 단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)함.

(!) Sass 로 작성하고 CSS로 컴파일해서 동작시킨다.

SASS vs. SCSS

Sass는 SASS 표기법(.sass)과 SCSS 표기법(.scss)이 있다. 이전 버전에서는 SASS 표기법이 기본 표기법이었으나 Sass 3.0부터 CSS 친화적인 SCSS(Sassy CSS) 표기법이 기본 표기법이 되었다.

Sass와 SCSS의 기능은 동일하고 SCSS 문법만 다르다. 문법 비교 참조

특징

CSS와 비교하여 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

  • 변수의 사용
  • 조건문과 반복문
  • Import
  • Nesting
  • Mixin
  • Extend/Inheritance

컴파일러

문법