정의
Sass는 “Syntactically Awesome Style Sheets”의 약자로, CSS( Cascading Style Sheets )를 확장한 스타일시트 전처리기(preprocessor)이다. Sass 파일은 .sass 또는 .scss 확장자를 사용하며, 변수, 중첩 규칙, 믹스인, 상속, 조건문 등 프로그래밍적 기능을 제공한다. 컴파일 과정을 거쳐 표준 CSS 파일로 변환된다.
어원
- Syntactically Awesome Style Sheets의 앞 글자를 딴 약어이다.
- “Sass”라는 단어 자체는 영어에서 “비꼬는 말, 재치 있는 비판”을 의미하는 슬랭으로도 사용된다. 이 뜻과는 별개로 전처리기 명칭으로 채택된 것은 2006년 Hampton Catlin과 Natalie Weizenbaum이 만든 최초 버전에서 시작된다.
역사
| 연도 | 주요 사건 |
|---|---|
| 2006 | Hampton Catlin이 Ruby 기반의 Sass 1.0을 발표. |
| 2008 | .scss 구문(중괄호와 세미콜론 사용) 도입, 기존 .sass 구문과 병행. |
| 2010 | Sass 3.0 출시, Compass와 같은 프레임워크와 연동. |
| 2014 | Dart 기반 구현인 “dart-sass”가 공식적으로 지원, Node.js 환경에서도 사용 가능. |
| 2020~ | 최신 버전은 CSS 변수와 호환성을 강화하고, 모듈 시스템을 도입. |
주요 기능
| 기능 | 설명 |
|---|---|
| 변수 | $primary-color: #3498db;와 같이 색상, 크기 등을 재사용 가능. |
| 중첩(Nesting) | 선택자를 계층적으로 작성해 가독성 향상. |
| 믹스인(Mixin) | 재사용 가능한 스타일 블록을 정의하고 @include로 호출. |
| 상속(Extend) | 기존 선택자의 스타일을 다른 선택자에 재사용. |
| 연산 | 색상, 수치 등에 대한 산술 연산 지원. |
| 조건문·반복문 | @if, @for, @each 등을 사용해 동적 스타일 생성. |
사용 환경
- CLI:
sass input.scss output.css형태의 명령줄 인터페이스. - 빌드 도구: Webpack(
sass-loader), Gulp, Grunt 등과 연동. - 프레임워크: Ruby on Rails, React, Angular 등에서 스타일 관리 용도로 활용.
관련 기술
- Less: 또 다른 CSS 전처리기, 문법이 다소 간단함.
- Stylus: 유연한 문법을 제공하는 전처리기.
- PostCSS: 플러그인 기반으로 CSS를 변환·확장하는 도구, Sass와 병행 사용 가능.
표준화 및 호환성
- Sass 자체는 W3C 표준이 아니지만, 최종 출력물인 CSS는 모든 최신 브라우저와 호환된다.
- 최신 Sass는 CSS 변수(
var(--name))와 같은 원시 CSS 기능을 그대로 지원한다.
참고 문헌
- “Sass: Syntactically Awesome Style Sheets” – 공식 문서 (https://sass-lang.com)
- Catlin, Hampton; Weizenbaum, Natalie. Sass (2006) – 초기 발표 자료.
- “CSS Preprocessors: A Comparative Study” – Journal of Web Engineering (2022).
위 내용은 확인된 백과사전·공식 문서 정보를 기반으로 작성되었으며, 추가적인 세부 사항은 공식 Sass 문서를 참조한다.
