{{위키데이터 속성 추적}}
{{Infobox programming language
| name = Sass
| logo = Sass Logo Color.svg
| designer = [[햄튼 캐틀린]]
| developer = Natalie Weizenbaum, Chris Eppstein
| typing = [[동적 타이핑|동적]]
| implementations = [[다트 (프로그래밍 언어)|다트]], [[루비 (프로그래밍 언어)|루비]]
| influenced = [[Less (스타일시트 언어)|Less]], [[스타일러스 (스타일시트 언어)|스타일러스]], [[트리튬 (프로그래밍 언어)|트리튬]], [[부트스트랩 (프런트엔드 프레임워크)|부트스트랩 (v4+)]]
| license = [[MIT 라이선스]]
| website = {{URL|https://sass-lang.com/}}
| released = {{시작 날짜와 나이|2006|11|28}}
| latest_release_version = 1.54.0<ref name=latest-release>{{웹 인용|url=https://github.com/sass/dart-sass/blob/main/CHANGELOG.md|title=Dart Sass - latest release|website=github.com}}</ref>
| latest_release_date = {{시작 날짜와 나이|2022|07|07}}<ref name=latest-release/>
| influenced_by = [[CSS]] (모두 "들여쓰기" 및 SCSS)
[[YAML]] 및 [[Haml]] (들여쓰기 문법)
Less (SCSS)
| operating_system = [[크로스 플랫폼]]
| file_ext = .sass, .scss
}}
'''Sass'''(syntactically awesome stylesheets, 사스)는 [[햄튼 캐틀린]]이 설계하고 [[나탈리 바이첸바움]]이 개발한 [[스타일시트 언어]]이다.<ref name="about">{{웹 인용|url=http://sass-lang.com/about.html|title=Sass: Syntactically Awesome Style Sheets|work=sass-lang.com|확인날짜=2013년 8월 30일|보존url=https://web.archive.org/web/20130901145805/http://sass-lang.com/about.html|보존날짜=2013년 9월 1일|url-status=dead}}</ref><ref>{{웹 인용 | title = Natalie Weizenbaum's blog | url = http://nex-3.com/ | 확인날짜 = 2014년 1월 17일 | 보존url = https://web.archive.org/web/20071011121541/http://nex-3.com/ | 보존날짜 = 2007년 10월 11일 | url-status = dead }}</ref> 초기 버전들 이후에 바이첸바움과 [[크리스 엡스타인]]은 Sass 파일에 쓰이는 단순 스크립팅 언어인 SassScript로 Sass의 확장을 계속하였다.

Sass는 [[종속형 시트]](CSS)로 [[인터프리트 언어|해석]] 및 [[컴파일 언어|컴파일]]되는 [[스크립트 언어]]이다. SassScript는 그 자체로 스크립트 언어이다. Sass는 2가지 신택스로 구성되어 있다. 인덴티드 신택스(indented syntax)라는 이름의 원래의 신택스는 [[Haml]]과 비슷한 신택스를 사용한다.<ref name="main">{{웹 인용|author=Media Mark (3.2.12) |url=http://sass-lang.com/ |title=Sass - Syntactically Awesome Stylesheets |publisher=Sass-lang.com |date= |accessdate=2014-02-23}}</ref> 규칙 분리를 위해 [[들여쓰기 방식|들여쓰기]]를 사용하여 코드 블록과 [[새줄 문자]]를 구분한다. 새로운 신택스 "SCSS"는 CSS의 것과 비슷한 블록 형식을 사용한다. 블록 안의 줄을 구분하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지한다. 인덴티드 신택스와 SCSS 파일들은 전통적으로 각각 .sass, .scss [[파일 확장자|확장자]]를 가진다.

[[종속형 시트|CSS3]]는 이들에 적용할 규칙을 묶는 일련의 셀렉터와 의사 셀렉터(pseudo-selector)들로 구성된다. Sass<ref>{{웹 인용|first1=Saransh|last1=Kataria|title=Getting started with sass development|url=http://wisdomgeek.com/web-development/getting-started-with-sass/|website=wisdomgeek|publisher=saranshkataria}}</ref>(두 신택스에 해당)는 특히 [[객체 지향 프로그래밍|객체 지향 언어]]와 같은 더 전통적인 [[프로그래밍 언어]]에서 사용 가능하면서도 CSS3 자체적으로는 이용이 불가능한 여러 매커니즘을 제공함으로써 CSS를 확장한다. SassScript이 해석될 때 Sass 파일에 정의된 여러 셀렉터를 위한 CSS 규칙 블록을 만들어낸다. Sass 인터프리터는 SassScript를 CSS로 변환한다. 아니면 Sass는 .sass나 .scss 파일을 모니터링하다가 .sass 또는 .scss 파일이 저장될 때마다.css 파일로 변환, 출력할 수 있다.<ref name="tutorial">[http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets] {{웨이백|url=http://sass-lang.com/tutorial.html |date=20131009053354 }} Tutorial</ref> Sass는 CSS를 위한 [[신택틱 슈거]]라 할 수 있다.

Sass 공식 구현체는 [[오픈 소스 소프트웨어|오픈 소스]]이며 [[루비 (프로그래밍 언어)|루비]]로 코딩되어 있다. 그러나 [[다트 (프로그래밍 언어)|다트]], [[PHP]], 또 libSass라는 이름의 [[C (프로그래밍 언어)|C]]의 고성능 구현체를 포함하여 다른 구현체들도 존재한다.<ref>{{웹 인용 |url=http://drupal.org/project/sass |title=Sass / Scss |publisher=Drupal.org |date= |accessdate=2014-02-23 |archive-date=2016-03-10 |archive-url=https://web.archive.org/web/20160310210318/https://www.drupal.org/project/sass |url-status= }}</ref><ref name="libsass-html5conf">{{웹 인용
  | url=https://www.youtube.com/watch?v=j75-SslllvY&feature=player_detailpage#t=1831s
  | title=Hampton's 6 Rules of Mobile Design
  | publisher=HTML5 Developer Conference
  | date=2012-10-15
  | accessdate=2013-07-11
  | author=H. Catlin}}</ref> 또, JSass라는 이름의 [[자바 (프로그래밍 언어)|자바]] 구현체도 있다.<ref>{{웹 인용|url=https://code.google.com/p/jsass/ |title=jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting |publisher=Code.google.com |date= |accessdate=2014-02-23}}</ref> 게다가 [[Vaadin]]은 Sass의 자바 구현체를 포함하고 있다.<ref>{{웹 인용 |url=https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html |title=SassCompiler (Vaadin 7.0.7 API) |publisher=Vaadin.com |date=2013-06-06 |accessdate=2014-02-23 |archive-date=2014-04-21 |archive-url=https://web.archive.org/web/20140421052745/https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html |url-status=dead }}</ref> 인덴티드 신택스는 메타 언어이다. SCSS는 [[메타 언어|네스티드 메타 언어]]인데, 유효한 CSS가 동일한 시맨틱스를 포함하고 있는 유효한 SCSS이다. Sass는 [[모질라 파이어폭스]] 확장 기능 [[파이어버그]]와의 통합을 지원한다.<ref name="doc">[http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass (Syntactically Awesome StyleSheets)] SASS_REFERENCE</ref>

SassScript는 다음의 매커니즘을 제공한다: 변수, 네스팅, [[mixin]], 셀렉터 상속.<ref name="main" />

== 변수 ==
Sass는 변수 정의를 허용한다. 변수는 [[$]] (<code>$</code>)로 시작할 수 있다. 변수 할당은 [[콜론]](<code>:</code>)으로 마무리한다.<ref name="doc" />

SassScript는 4가지 자료형을 지원한다:<ref name="doc" />

* [[수 (수학)|수]] (단위 포함)
* [[문자열]] (인용 부호가 있거나 없이)
* 컬러 (하나 이상의 이름)
* [[불리언 자료형|불리언]]

변수는 사용 가능한 여러 [[함수 (프로그래밍)|함수]]들 가운데 하나에 대해 [[매개변수 (컴퓨터 프로그래밍)|매개변수]]로 사용하거나 결과물이 될 수 있다.<ref name="functions">[http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Module: Sass::Script::Functions] Sass Functions</ref> 변환 과정 중에 변수의 값들은 출력 CSS 문서에 삽입된다.<ref name="main" />

SCSS 스타일:

<syntaxhighlight lang="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;
}
</syntaxhighlight>

Sass 스타일:

<syntaxhighlight lang="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
</syntaxhighlight>

컴파일 결과:
<syntaxhighlight lang="css">
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}
</syntaxhighlight>

== 네스팅 ==
CSS는 논리적인 네스팅을 지원하지만 코드 블록 자체는 네스팅되지 않는다. Sass는 서로 간에 네스팅된 코드를 삽입할 수 있게 한다.<ref name="main" />

Sass 스타일:

<syntaxhighlight lang="sass">
table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.3em


</syntaxhighlight>

SCSS 스타일:

<syntaxhighlight lang="scss">
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}
</syntaxhighlight>

컴파일 결과:

<syntaxhighlight lang="css">
table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}
</syntaxhighlight>

[[이름공간]] 네스팅 및 부모 참조를 포함한 더 복잡한 유형의 네스팅은 Sass 문서에서 논하고 있다.<ref name="doc" />

<syntaxhighlight lang="scss">
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {
    padding: 2px;
  }
}

#data {
  @include table-base;
}
</syntaxhighlight>

Sass 스타일:

<syntaxhighlight lang="sass">
=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

#data
  +table-base
</syntaxhighlight>

컴파일 결과:

<syntaxhighlight lang="css">
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}
</syntaxhighlight>

=== 루프 ===

Sass는 {{code|lang=sass|code=@for}}, {{code|lang=sass|code=@each}}, {{code|lang=sass|code=@while}}를 사용하여 변수에 대한 루프를 지원하며, 비슷한 클래스나 id를 가진 요소들에 각기 다른 스타일을 적용하기 위해 사용할 수 있다.

<syntaxhighlight lang="sass">
$squareCount: 3
@for $i from 1 through $squareCount
  #square-#{$i}
   background-color: red
   width: 50px * $i
   height: 120px / $i
</syntaxhighlight>

위의 예의 컴파일 결과:

<syntaxhighlight lang="css">
#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;
}
</syntaxhighlight>

=== 인수 ===
Mixins은 또한 인수를 지원한다.<ref name="main" />

<syntaxhighlight lang="sass">
=left($dist)
  float: left
  margin-left: $dist

#data
  +left(10px)

</syntaxhighlight>

컴파일 결과:

<syntaxhighlight lang="css">
#data {
  float: left;
  margin-left: 10px;
}
</syntaxhighlight>

=== 혼합 ===

<syntaxhighlight lang="sass">
=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
</syntaxhighlight>

컴파일 결과:

<syntaxhighlight lang="css">
#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}
</syntaxhighlight>

== 셀렉터 상속 ==
CSS3는 [[문서 객체 모델]](DOM) 계층을 지원하지만 셀렉터 상속을 허용하지 않는다. Sass에서 상속은 @extend 키워드를 사용하고 다른 셀렉터를 참조하는 코드 블록 내 줄을 삽입함으로써 수행된다. 이 확장된 셀렉터의 속성은 호출을 하는 셀렉터에 적용된다.<ref name="main" />

<syntaxhighlight lang="sass">
.error
  border: 1px #f00
  background: #fdd

.error.intrusion
  font-size: 1.3em
  font-weight: bold

.badError
  @extend .error
  border-width: 3px
</syntaxhighlight>

컴파일 결과:

<syntaxhighlight lang="css">
.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}
</syntaxhighlight>

Sass는 [[다중 상속]]을 지원한다.<ref name="doc" />

== libSass ==
2012년에 HTML5 개발자 콘퍼런스에서 Sass의 개발자 햄튼 캐틀린은 [[무브웹]]의 엔지니어링 팀, 캐틀린, Aaron Leung이 개발한 Sass의 오픈 소스 C++ 구현체 libSass의 버전 1.0을 발표하였다.<ref name="libsass-html5conf" /><ref name="libsass-moovweb-blog">{{웹 인용
 |url          = http://blog.moovweb.com/2012/04/libsass/
 |title        = libsass
 |publisher    = Moovweb Blog
 |date         = 2012-04-30
 |accessdate   = 2013-07-11
 |author       = M. Catlin
 |보존url    = https://web.archive.org/web/20130508080521/http://blog.moovweb.com/2012/04/libsass/
 |보존날짜 = 2013-05-08
 |url-status = dead
}}</ref> 현재의 Sass 유지보수자 크리스 엡스타인 또한 기여할 의도가 있음을 내비쳤다.<ref>{{웹 인용
  | url=https://twitter.com/chriseppstein/status/323845132417900544
  | title=Tweet
  | date=2012-04-15
  | accessdate=2013-07-11
  | author=C. Eppstein}}</ref>

캐틀린에 따르면 "libSass는 아무 곳에나 던져 넣으면 Sass가 들어간다... 오늘날에는 파이어폭스에 바로 넣어서 파이어폭스를 빌드하고 컴파일된다. 가능한 처음부터 우리만의 파서를 썼다."<ref>{{웹 인용
  | url=http://5by5.tv/changelog/94
  | title=Sass, libsass, Haml and more with Hampton Catlin
  | date=2013-06-26
  | accessdate=2013-07-30
  | author=A. Stacoviak & A. Thorp
  | archive-date=2013-08-06
  | archive-url=https://web.archive.org/web/20130806073554/http://5by5.tv/changelog/94
  | url-status=
  }}</ref>

libSass의 설계 목적은 다음과 같다:
* 성능&nbsp;- 개발자들은 Sass의 루비 구현체 대비 10배 속도가 더 빠르다고 보고하였다.<ref>{{웹 인용
  | url=http://www.damln.com/log/sassc-and-bourbon-it-works/
  | title=Sassc and Bourbon
  | date=2013-06-07
  | accessdate=2013-07-11
  | author=D. Le Nouaille}}</ref>
* 더 쉬운 통합&nbsp;- libSass는 Sass를 더 많은 소프트웨어에 더 쉽게 통합할 수 있게 한다. libSass 이전까지는 Sass를 특정 언어나 소프트웨어 제품에 밀접하게 통합하기 위해 루비 인터프리터를 번들해야 했다. 이와 대조적으로 libSass는 외부 의존성이나 C 계열 인터페이스 없이 정적 링크가 가능한 라이브러리이므로 다른 프로그래밍 언어와 도구에 직접 Sass를 래핑하는 것이 용이하다.
이를테면, 오픈 소스 libSass 바인딩은 현재 [[Node.js|Node]], [[Go (프로그래밍 언어)|Go]], [[루비 (프로그래밍 언어)|Ruby]]용으로 존재한다.<ref name="libsass-moovweb-blog" />
* 호환성&nbsp;- libSass의 목적은 공식 루비 구현체의 Sass와의 완전한 호환성이다. 그러나 이 목표는 아직까지 완전히 충족되지 않고 있다.<ref name="libsass-html5conf" />

== IDE 통합 ==
{| class="wikitable"
|-
! IDE !! 소프트웨어 !! 웹사이트
|-
|[[어도비 드림위버]] CC 2017
|
|https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ {{웨이백|url=https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ |date=20161114235934 }}
|-
| [[이클립스 (소프트웨어)|이클립스]] ||  || 
|-
| [[이맥스]] || SCSS Mode || https://github.com/antonj/scss-mode/
|-
| [[IntelliJ IDEA|JetBrains IntelliJ IDEA (얼티밋 에디션)]] || ||https://www.jetbrains.com/idea/
|-
| [[PhpStorm|JetBrains PhpStorm]] || ||http://www.jetbrains.com/phpstorm/
|-
| [[루비마인|JetBrains RubyMine]] || ||http://www.jetbrains.com/ruby/
|-
| [[마이크로소프트 비주얼 스튜디오]] || Mindscape          || http://www.mindscapehq.com/products/web-workbench
|-
| [[마이크로소프트 비주얼 스튜디오]] || SassyStudio || http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d
|-
| [[마이크로소프트 웹 매트릭스]] ||           || https://web.archive.org/web/20150512042040/http://www.microsoft.com/web/
|-
| [[넷빈즈]] || || http://plugins.netbeans.org/plugin/34929/scss-support {{웨이백|url=http://plugins.netbeans.org/plugin/34929/scss-support |date=20151008054347 }}
|-
| [[Vim]] || haml.zip || http://www.vim.org/scripts/script.php?script_id=1433
|-
| [[아톰 (문서 편집기)|아톰]] || || https://github.com/atom/language-sass
|-
| [[비주얼 스튜디오 코드]] || || https://code.visualstudio.com/Docs/languages/css
|}

== 같이 보기 ==
* [[Less (스타일시트 언어)]]
* [[스타일러스 (스타일시트 언어)]]
== 각주 ==
{{각주}}

== 외부 링크 ==
* {{공식 웹사이트}}
* [https://groups.google.com/group/haml Haml/Sass Google Group]
* [https://github.com/Kronuz/pyScss pyScss, a Python Scss library and client]
* [https://github.com/hapztron/sai Sai the mixins extension and CSS authoring framework for Less & Sass/Scss (Git) ]
* [https://web.archive.org/web/20150323061242/http://www.logogulf.ae/blog/sass-tools-and-resources/ Sass tools and resources]

[[분류:2006년 개발된 프로그래밍 언어]]
[[분류:MIT 라이선스 소프트웨어]]
[[분류:루비 (프로그래밍 언어)]]
[[분류:스타일시트 언어]]
[[분류:자유 라이브러리]]