Sass

  다른 뜻에 대해서는 SaaS 문서를 참조하십시오.

1 개요

Syntactically Awesome Stylesheets; Sass

사스

• Hampton Catlin이 설계, Nathan Weizenbaum이 개발한 스타일 시트 언어
• CSS 전처리기
• SassScript용 확장이 추가됨
• 중첩규칙 사용 가능
• 셀렉터 상속, 다중상속 가능
• 스타일은 2가지: SASS, SCSS

스타일	확장자	특징
SASS	.sass	들여쓰기로 블록 구분
SCSS	.scss	중괄호( { } )로 블록 구분 ★

• 전반적으로 LESS보다 좋다는 평이 많음

2 예시

SASS

$blue: #3bbfce
$margin: 16px
 
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
 
.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

SCSS

$blue: #3bbfce;
$margin: 16px;
 
.content-navigation {
  border-color: $blue;
  color: darken($blue, 20%);
}
 
.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

결과 CSS

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}
 
.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

3 같이 보기

• LESS
• CSS
• CSS 프레임워크
• Haml

5 참고

• http://sass-lang.com/
• 위키백과 "Sass (종속형 시트 언어)"
• https://en.wikipedia.org/wiki/Sass_(stylesheet_language)