Sass (스타일시트 언어)
 | |
| 설계자 | 햄튼 캐틀린 |
|---|---|
| 개발자 | Natalie Weizenbaum, Chris Eppstein |
| 발표일 | 2006년 11월 28일 |
| 최근 버전 | 1.54.0[1] |
| 최근 버전 출시일 | 2022년 7월 7일[1] |
| 자료형 체계 | 동적 |
| 운영 체제 | 크로스 플랫폼 |
| 라이선스 | MIT 라이선스 |
| 파일 확장자 | .sass, .scss |
| 웹사이트 | sass-lang |
| 주요 구현체 | |
| 다트, 루비 | |
| 영향을 받은 언어 | |
| CSS (모두 "들여쓰기" 및 SCSS) Less (SCSS) | |
| 영향을 준 언어 | |
| Less, 스타일러스, 트리튬, 부트스트랩 (v4+) | |
Sass(syntactically awesome stylesheets, 사스)는 햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일시트 언어이다.[2][3] 초기 버전들 이후에 바이첸바움과 크리스 엡스타인은 Sass 파일에 쓰이는 단순 스크립팅 언어인 SassScript로 Sass의 확장을 계속하였다.
Sass는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어이다. SassScript는 그 자체로 스크립트 언어이다. Sass는 2가지 신택스로 구성되어 있다. 인덴티드 신택스(indented syntax)라는 이름의 원래의 신택스는 Haml과 비슷한 신택스를 사용한다.[4] 규칙 분리를 위해 들여쓰기를 사용하여 코드 블록과 새줄 문자를 구분한다. 새로운 신택스 "SCSS"는 CSS의 것과 비슷한 블록 형식을 사용한다. 블록 안의 줄을 구분하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지한다. 인덴티드 신택스와 SCSS 파일들은 전통적으로 각각 .sass, .scss 확장자를 가진다.
CSS3는 이들에 적용할 규칙을 묶는 일련의 셀렉터와 의사 셀렉터(pseudo-selector)들로 구성된다. Sass[5](두 신택스에 해당)는 특히 객체 지향 언어와 같은 더 전통적인 프로그래밍 언어에서 사용 가능하면서도 CSS3 자체적으로는 이용이 불가능한 여러 매커니즘을 제공함으로써 CSS를 확장한다. SassScript이 해석될 때 Sass 파일에 정의된 여러 셀렉터를 위한 CSS 규칙 블록을 만들어낸다. Sass 인터프리터는 SassScript를 CSS로 변환한다. 아니면 Sass는 .sass나 .scss 파일을 모니터링하다가 .sass 또는 .scss 파일이 저장될 때마다.css 파일로 변환, 출력할 수 있다.[6] Sass는 CSS를 위한 신택틱 슈거라 할 수 있다.
Sass 공식 구현체는 오픈 소스이며 루비로 코딩되어 있다. 그러나 다트, PHP, 또 libSass라는 이름의 C의 고성능 구현체를 포함하여 다른 구현체들도 존재한다.[7][8] 또, JSass라는 이름의 자바 구현체도 있다.[9] 게다가 Vaadin은 Sass의 자바 구현체를 포함하고 있다.[10] 인덴티드 신택스는 메타 언어이다. SCSS는 네스티드 메타 언어인데, 유효한 CSS가 동일한 시맨틱스를 포함하고 있는 유효한 SCSS이다. Sass는 모질라 파이어폭스 확장 기능 파이어버그와의 통합을 지원한다.[11]
SassScript는 다음의 매커니즘을 제공한다: 변수, 네스팅, mixin, 셀렉터 상속.[4]
변수[편집]
Sass는 변수 정의를 허용한다. 변수는 $ ($)로 시작할 수 있다. 변수 할당은 콜론(:)으로 마무리한다.[11]
SassScript는 4가지 자료형을 지원한다:[11]
변수는 사용 가능한 여러 함수들 가운데 하나에 대해 매개변수로 사용하거나 결과물이 될 수 있다.[12] 변환 과정 중에 변수의 값들은 출력 CSS 문서에 삽입된다.[4]
SCSS 스타일:
$primary-color: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $primary-color;
color: darken($primary-color, 10%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $primary-color;
}
Sass 스타일:
$primary-color: #3bbfce
$margin: 16px
.content-navigation
border-color: $primary-color
color: darken($primary-color, 10%)
.border
padding: $margin/2
margin: $margin/2
border-color: $primary-color
컴파일 결과:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
네스팅[편집]
CSS는 논리적인 네스팅을 지원하지만 코드 블록 자체는 네스팅되지 않는다. Sass는 서로 간에 네스팅된 코드를 삽입할 수 있게 한다.[4]
Sass 스타일:
table.hl
margin: 2em 0
td.ln
text-align: right
li
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 문서에서 논하고 있다.[11]
@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은 또한 인수를 지원한다.[4]
=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 키워드를 사용하고 다른 셀렉터를 참조하는 코드 블록 내 줄을 삽입함으로써 수행된다. 이 확장된 셀렉터의 속성은 호출을 하는 셀렉터에 적용된다.[4]
.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;
}
libSass[편집]
2012년에 HTML5 개발자 콘퍼런스에서 Sass의 개발자 햄튼 캐틀린은 무브웹의 엔지니어링 팀, 캐틀린, Aaron Leung이 개발한 Sass의 오픈 소스 C++ 구현체 libSass의 버전 1.0을 발표하였다.[8][13] 현재의 Sass 유지보수자 크리스 엡스타인 또한 기여할 의도가 있음을 내비쳤다.[14]
캐틀린에 따르면 "libSass는 아무 곳에나 던져 넣으면 Sass가 들어간다... 오늘날에는 파이어폭스에 바로 넣어서 파이어폭스를 빌드하고 컴파일된다. 가능한 처음부터 우리만의 파서를 썼다."[15]
libSass의 설계 목적은 다음과 같다:
- 성능 - 개발자들은 Sass의 루비 구현체 대비 10배 속도가 더 빠르다고 보고하였다.[16]
- 더 쉬운 통합 - libSass는 Sass를 더 많은 소프트웨어에 더 쉽게 통합할 수 있게 한다. libSass 이전까지는 Sass를 특정 언어나 소프트웨어 제품에 밀접하게 통합하기 위해 루비 인터프리터를 번들해야 했다. 이와 대조적으로 libSass는 외부 의존성이나 C 계열 인터페이스 없이 정적 링크가 가능한 라이브러리이므로 다른 프로그래밍 언어와 도구에 직접 Sass를 래핑하는 것이 용이하다.
이를테면, 오픈 소스 libSass 바인딩은 현재 Node, Go, Ruby용으로 존재한다.[13]
- 호환성 - libSass의 목적은 공식 루비 구현체의 Sass와의 완전한 호환성이다. 그러나 이 목표는 아직까지 완전히 충족되지 않고 있다.[8]
IDE 통합[편집]
각주[편집]
- ↑ 가 나 “Dart Sass - latest release”. 《github.com》.
- ↑ “Sass: Syntactically Awesome Style Sheets”. 《sass-lang.com》. 2013년 9월 1일에 원본 문서에서 보존된 문서. 2013년 8월 30일에 확인함.
- ↑ “Natalie Weizenbaum's blog”. 2007년 10월 11일에 원본 문서에서 보존된 문서. 2014년 1월 17일에 확인함.
- ↑ 가 나 다 라 마 바 Media Mark (3.2.12). “Sass - Syntactically Awesome Stylesheets”. Sass-lang.com. 2014년 2월 23일에 확인함.
- ↑ Kataria, Saransh. “Getting started with sass development”. 《wisdomgeek》. saranshkataria.
- ↑ Sass - Syntactically Awesome Stylesheets Archived 2013년 10월 9일 - 웨이백 머신 Tutorial
- ↑ “Sass / Scss”. Drupal.org. 2014년 2월 23일에 확인함.
- ↑ 가 나 다 H. Catlin (2012년 10월 15일). “Hampton's 6 Rules of Mobile Design”. HTML5 Developer Conference. 2013년 7월 11일에 확인함.
- ↑ “jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting”. Code.google.com. 2014년 2월 23일에 확인함.
- ↑ “SassCompiler (Vaadin 7.0.7 API)”. Vaadin.com. 2013년 6월 6일. 2014년 4월 21일에 원본 문서에서 보존된 문서. 2014년 2월 23일에 확인함.
- ↑ 가 나 다 라 마 Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
- ↑ Module: Sass::Script::Functions Sass Functions
- ↑ 가 나 M. Catlin (2012년 4월 30일). “libsass”. Moovweb Blog. 2013년 5월 8일에 원본 문서에서 보존된 문서. 2013년 7월 11일에 확인함.
- ↑ C. Eppstein (2012년 4월 15일). “Tweet”. 2013년 7월 11일에 확인함.
- ↑ A. Stacoviak & A. Thorp (2013년 6월 26일). “Sass, libsass, Haml and more with Hampton Catlin”. 2013년 8월 6일에 원본 문서에서 보존된 문서. 2013년 7월 30일에 확인함.
- ↑ D. Le Nouaille (2013년 6월 7일). “Sassc and Bourbon”. 2013년 7월 11일에 확인함.
