Sass (스타일시트 언어)

Sass(syntactically awesome stylesheets, 사스)는 햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일시트 언어이다. 초기 버전들 이후에 바이첸바움과 크리스 엡스타인은 Sass 파일에 쓰이는 단순 스크립팅 언어인 SassScript로 Sass의 확장을 계속하였다.
Sass는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어이다. SassScript는 그 자체로 스크립트 언어이다. Sass는 2가지 신택스로 구성되어 있다. 인덴티드 신택스(indented syntax)라는 이름의 원래의 신택스는 Haml과 비슷한 신택스를 사용한다. 규칙 분리를 위해 들여쓰기를 사용하여 코드 블록과 새줄 문자를 구분한다. 새로운 신택스 "SCSS"는 CSS의 것과 비슷한 블록 형식을 사용한다. 블록 안의 줄을 구분하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지한다. 인덴티드 신택스와 SCSS 파일들은 전통적으로 각각 .sass, .scss 확장자를 가진다.
CSS3는 이들에 적용할 규칙을 묶는 일련의 셀렉터와 의사 셀렉터(pseudo-selector)들로 구성된다. Sass(두 신택스에 해당)는 특히 객체 지향 언어와 같은 더 전통적인 프로그래밍 언어에서 사용 가능하면서도 CSS3 자체적으로는 이용이 불가능한 여러 매커니즘을 제공함으로써 CSS를 확장한다. SassScript이 해석될 때 Sass 파일에 정의된 여러 셀렉터를 위한 CSS 규칙 블록을 만들어낸다. Sass 인터프리터는 SassScript를 CSS로 변환한다. 아니면 Sass는 .sass나 .scss 파일을 모니터링하다가 .sass 또는 .scss 파일이 저장될 때마다 .css 파일로 변환, 출력할 수 있다. Sass는 CSS를 위한 신택틱 슈거라 할 수 있다.
Sass 공식 구현체는 오픈 소스이며 루비로 코딩되어 있다. 그러나 다트, PHP, 또 libSass라는 이름의 C의 고성능 구현체를 포함하여 다른 구현체들도 존재한다. 또, JSass라는 이름의 자바 구현체도 있다. 게다가 Vaadin은 Sass의 자바 구현체를 포함하고 있다. 인덴티드 신택스는 메타 언어이다. SCSS는 네스티드 메타 언어인데, 유효한 CSS가 동일한 시맨틱스를 포함하고 있는 유효한 SCSS이다. Sass는 모질라 파이어폭스 확장 기능 파이어버그와의 통합을 지원한다.
SassScript는 다음의 매커니즘을 제공한다: 변수, 네스팅, mixin, 셀렉터 상속.

네스팅

CSS는 논리적인 네스팅을 지원하지만 코드 블록 자체는 네스팅되지 않는다. Sass는 서로 간에 네스팅된 코드를 삽입할 수 있게 한다.
Sass 스타일:
table.hl
  margin: 2em 0
  td.ln
    text-align: rightli
  font:
    family: serif
    weight: bold
    size: 1.3em
SCSS 스타일:
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }}li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }}
컴파일 결과:
table.hl {
  margin: 2em 0;}table.hl td.ln {
  text-align: right;}li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;}
이름공간 네스팅 및 부모 참조를 포함한 더 복잡한 유형의 네스팅은 Sass 문서에서 논하고 있다.
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
    padding: 2px;
  }}#data {
  @include table-base;}
Sass 스타일:
=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px#data
  +table-base
컴파일 결과:
#data th {
  text-align: center;
  font-weight: bold;}#data td, #data th {
  padding: 2px;}

루프

Sass는 @for, @each, @while를 사용하여 변수에 대한 루프를 지원하며, 비슷한 클래스나 id를 가진 요소들에 각기 다른 스타일을 적용하기 위해 사용할 수 있다.
$squareCount: 3@for $i from 1 through $squareCount
  #square-#{$i}
   background-color: red
   width: 50px * $i
   height: 120px / $i
위의 예의 컴파일 결과:
#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;}#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;}#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;}

인수

Mixins은 또한 인수를 지원한다.
=left($dist)
  float: left
  margin-left: $dist#data
  +left(10px)
컴파일 결과:
#data {
  float: left;
  margin-left: 10px;}

혼합

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px=left($dist)
  float: left
  margin-left: $dist#data
  +left(10px)
  +table-base
컴파일 결과:
#data {
  float: left;
  margin-left: 10px;}#data th {
  text-align: center;
  font-weight: bold;}#data td, #data th {
  padding: 2px;}

셀렉터 상속

CSS3는 문서 객체 모델(DOM) 계층을 지원하지만 셀렉터 상속을 허용하지 않는다. Sass에서 상속은 @extend 키워드를 사용하고 다른 셀렉터를 참조하는 코드 블록 내 줄을 삽입함으로써 수행된다. 이 확장된 셀렉터의 속성은 호출을 하는 셀렉터에 적용된다.
.error
  border: 1px #f00
  background: #fdd.error.intrusion
  font-size: 1.3em
  font-weight: bold.badError
  @extend .error
  border-width: 3px
컴파일 결과:
.error, .badError {
  border: 1px #f00;
  background: #fdd;}.error.intrusion,.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;}.badError {
  border-width: 3px;}
Sass는 다중 상속을 지원한다.