Sass

24px-Disambig_grey.svg.png 다른 뜻에 대해서는 SaaS 문서를 참조하십시오.

1 개요[편집]

Syntactically Awesome Stylesheets; Sass
사스
  • Hampton Catlin이 설계, Nathan Weizenbaum이 개발한 스타일 시트 언어
  • CSS 전처리기
  • SassScript용 확장이 추가됨
  • 중첩규칙 사용 가능
  • 셀렉터 상속, 다중상속 가능
  • 스타일은 2가지: SASS, SCSS
스타일 확장자 특징
SASS .sass 들여쓰기로 블록 구분
SCSS .scss 중괄호( { } )로 블록 구분 ★
  • 전반적으로 LESS보다 좋다는 평이 많음[1]

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 같이 보기[편집]

4 주석[편집]

5 참고[편집]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}