Sass

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

1 개요[ | ]

Syntactically Awesome Stylesheets; Sass
사스

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

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

전반적으로 LESS보다 좋다는 평이 많음^[1]

2 예시[ | ]

SASS

css

Copy

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

SCSS

css

Copy

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

결과 CSS

css

Copy

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

3 같이 보기[ | ]

4 주석[ | ]

↑ https://css-tricks.com/sass-vs-less/

5 참고[ | ]

[1] ttps://css-tricks.com/sass-vs-less/

[1]