Sass

"Syntactically Awesome Style Sheets"의 약자입니다. Sass는 HTML 문서의 레이아웃과 서식을 정의하는 언어인 캐스케이딩 스타일 시트(CSS)의 확장 기능입니다. Sass는 CSS와 완전히 호환되는 구문을 사용하면서 CSS 변수와 중첩 규칙 같은 추가 기능을 제공하므로 CSS를 더 효율적으로 작성하고 쉽게 편집할 수 있습니다.

표준 CSS의 단점 중 하나는 변수를 지원하지 않는다는 것입니다. 예를 들어 여러 스타일에 같은 색상을 사용한다면 각 스타일에 색상을 따로 정의해야 합니다. 색상을 변경하려면 CSS 문서의 모든 부분에서 해당 색상을 변경해야 합니다. Sass에서는 색상을 변수로 정의하고, 이를 사용하는 모든 스타일에 할당할 수 있습니다. 색상을 변경하려는 경우 문서에서 처음 정의한 부분의 값만 한 번 변경하면 됩니다.

다음 예제는 Sass에서 CSS 변수를 정의하고 사용하는 방법을 보여 줍니다.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass는 중첩 규칙도 지원하므로 개발자는 더 효율적인 코드를 작성할 수 있습니다. 아래 예제에서는 .button 클래스가 #top p 스타일 안에 중첩되어 있습니다.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

위 코드를 컴파일하면 다음 CSS가 생성됩니다.

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Sass는 웹 개발자에게 여러 가지 이점을 제공하지만 Sass 문서는 웹 브라우저에서 인식되지 않습니다. 따라서 Sass 파일은 HTML 문서에서 사용하기 전에 먼저 CSS로 컴파일해야 합니다. CSS를 웹 서버에 업로드하기 전에 Compass.app 또는 Koala 같은 프로그램을 사용하여 로컬에서 컴파일할 수 있습니다. Sass를 CSS로 컴파일하는 PHP 또는 Ruby 스크립트를 사용하여 서버에서 컴파일할 수도 있습니다.