Sass (스타일시트 언어)

3. 주요 구현체

SassScript는 여러 언어로 구현되었으며, 주목할 만한 구현체는 다음과 같다.

2012년 HTML5 개발자 콘퍼런스에서 Sass의 창시자인 햄프턴 캐틀린은 무브웹의 엔지니어링 팀, 캐틀린, 아론 렁이 개발한 Sass의 오픈 소스 C++ 구현체인 libSass 버전 1.0을 발표했다.^[47][52] libSass의 설계 목적은 다음과 같았다.

• 성능: 개발자들은 Sass의 루비 구현체 대비 10배 더 빠른 속도를 보고하였다.^[55]
• 더 쉬운 통합: libSass는 Sass를 더 많은 소프트웨어에 더 쉽게 통합할 수 있게 한다. libSass 이전까지는 Sass를 특정 언어나 소프트웨어 제품에 밀접하게 통합하기 위해 루비 인터프리터를 번들해야 했다. 이와 대조적으로 libSass는 외부 의존성이나 C 계열 인터페이스 없이 정적 링크가 가능한 라이브러리이므로 다른 프로그래밍 언어와 도구에 직접 Sass를 래핑하는 것이 용이하다. 예를 들어, 오픈 소스 libSass 바인딩은 현재 Node, Go, Ruby용으로 존재한다.^[52]
• 호환성: libSass의 목적은 공식 루비 구현체의 Sass와의 완전한 호환성이었으나, 이 목표는 아직까지 완전히 충족되지 않고 있다.^[47]

4. 기능

Sass는 CSS 전처리기(preprocessor)로서, CSS의 기능을 확장하여 코드의 재사용성과 유지보수성을 높여준다. Sass는 다음과 같은 기능을 제공한다.^[18][2]

• 변수: 반복되는 값을 변수에 저장하여 쉽게 관리할 수 있다.
• 중첩(Nesting): 코드 블록을 중첩하여 가독성을 높이고, 코드 중복을 줄일 수 있다.
• 믹스인(Mixin): 코드 블록을 재사용 가능한 형태로 정의하고, 필요할 때 호출하여 사용할 수 있다.
• 반복문: `@for`, `@each`, `@while`과 같은 반복문을 사용하여 유사한 스타일을 반복적으로 적용할 수 있다.
• 상속: `@extend` 키워드를 사용하여 다른 선택자의 스타일을 상속받을 수 있다.

4. 1. 변수 (Variables)

• 수 (단위 포함)
• 문자열 (따옴표가 있거나 없이)
• 컬러 (하나 이상의 이름)
• 불리언

4. 2. 네스팅 (Nesting)

네임스페이스 중첩 및 부모 참조를 포함한 더 복잡한 유형의 중첩은 Sass 문서에서 논하고 있다.^[50]

4. 3. 믹스인 (Mixin)

4. 4. 반복문 (Loops)

4. 5. 상속 (Inheritance)

5. IDE 통합

Sass는 다음과 같은 다양한 통합 개발 환경(IDE)에서 지원된다.

참조

_[1] 웹사이트 Dart Sass - latest release https://github.com/s[...]
_[2] 웹사이트 Sass - Syntactically Awesome Stylesheets http://sass-lang.com[...] Sass-lang.com 2014-02-23
_[3] 서적 Introducing Dart Sass: A Practical Introduction to the Replacement for Sass, Built on Dart http://link.springer[...] Apress 2019
_[4] 웹사이트 Tutorial http://sass-lang.com[...] 2013-10-09
_[5] 서적 Programming the Mobile Web https://books.google[...] O'Reilly Media, Inc. 2013-03-15
_[6] 웹사이트 Sass: Syntactically Awesome Style Sheets http://sass-lang.com[...]
_[7] 웹사이트 Natalie Weizenbaum's blog http://nex-3.com/
_[8] 웹사이트 sass https://www.npmjs.co[...]
_[9] 웹사이트 sass-embedded https://www.npmjs.co[...]
_[10] 웹사이트 Sass / Scss http://drupal.org/pr[...] Drupal.org 2014-02-23
_[11] 웹사이트 Ruby Sass Has Reached End-Of-Life « Sass Blog http://sass.logdown.[...] 2019-04-21
_[12] 웹사이트 Sass: Ruby Sass https://sass-lang.co[...] 2019-04-21
_[13] 웹사이트 LibSass is Deprecated https://sass-lang.co[...] 2020-10-26
_[14] 웹사이트 node-sass https://www.npmjs.co[...]
_[15] 웹사이트 jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting https://code.google.[...] 2014-02-23
_[16] 웹사이트 JSass documentation https://jsass.readth[...]
_[17] 웹사이트 SassCompiler (Vaadin 7.0.7 API) https://vaadin.com/a[...] Vaadin.com 2014-02-23
_[18] 문서 SASS_REFERENCE http://sass-lang.com[...]
_[19] 문서 Sass Functions http://sass-lang.com[...]
_[20] 웹사이트 Hampton's 6 Rules of Mobile Design https://www.youtube.[...] HTML5 Developer Conference 2013-07-11
_[21] 웹사이트 libsass http://blog.moovweb.[...] Moovweb Blog 2013-07-11
_[22] 웹사이트 Sass, libsass, Haml and more with Hampton Catlin http://5by5.tv/chang[...] 2013-07-30
_[23] 웹사이트 Sassc and Bourbon http://www.damln.com[...] 2013-07-11
_[24] 웹사이트 Sass Compatibility http://sass-compatib[...] 2019-11-29
_[25] 문서 Latest releases https://github.com/s[...]
_[26] 웹사이트 The Future of Sass by Hampton Catlin https://www.youtube.[...] 2016-02-18
_[27] 웹사이트 "#01 Sassとはなにか？" http://dotinstall.co[...] 2016-02-18
_[28] 문서 Hampton Catlin
_[29] 문서 Nathan Weizenbaum
_[30] 웹사이트 Sass - Syntactically Awesome Style Sheets http://sass-lang.com[...]
_[31] 웹사이트 Nathan Weizenbaum's blog http://nex-3.com/ 2014-01-17
_[32] 문서 Sass - Syntactically Awesome Stylesheets https://sass-lang.co[...]
_[33] 문서 Sass — Syntactically Awesome Stylesheets 解説書 http://sass-lang.com[...]
_[34] URL https://drupal.org/project/sass https://drupal.org/p[...]
_[35] 웹사이트 Hampton's 6 Rules of Mobile Design https://www.youtube.[...] HTML5 Developer Conference 2013-07-11
_[36] 웹사이트 https://code.google.[...]
_[37] 웹사이트 http://sass.logdown.[...]
_[38] 웹사이트 https://github.com/s[...]
_[39] 문서 Sass (Syntactically Awesome StyleSheets) http://sass-lang.com[...]
_[40] 웹인용 Dart Sass - latest release https://github.com/s[...]
_[41] 웹인용 Sass: Syntactically Awesome Style Sheets https://web.archive.[...] 2013-08-30
_[42] 웹인용 Natalie Weizenbaum's blog https://web.archive.[...] 2014-01-17
_[43] 웹인용 Sass - Syntactically Awesome Stylesheets http://sass-lang.com[...] Sass-lang.com 2014-02-23
_[44] 웹인용 Getting started with sass development http://wisdomgeek.co[...] saranshkataria
_[45] 웹사이트 Sass - Syntactically Awesome Stylesheets http://sass-lang.com[...]
_[46] 웹인용 Sass / Scss http://drupal.org/pr[...] Drupal.org 2014-02-23
_[47] 웹인용 Hampton's 6 Rules of Mobile Design https://www.youtube.[...] HTML5 Developer Conference 2012-10-15
_[48] 웹인용 jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting https://code.google.[...] Code.google.com 2014-02-23
_[49] 웹인용 SassCompiler (Vaadin 7.0.7 API) https://web.archive.[...] Vaadin.com 2013-06-06
_[50] 문서 Sass (Syntactically Awesome StyleSheets) http://sass-lang.com[...]
_[51] 문서 Module: Sass::Script::Functions http://sass-lang.com[...]
_[52] 웹인용 libsass https://web.archive.[...] Moovweb Blog 2012-04-30
_[53] 웹인용 Tweet https://twitter.com/[...] 2012-04-15
_[54] 웹인용 Sass, libsass, Haml and more with Hampton Catlin http://5by5.tv/chang[...] 2013-06-26
_[55] 웹인용 Sassc and Bourbon http://www.damln.com[...] 2013-06-07