Sass (스타일시트 언어)

1. 개요

Sass(Syntactically Awesome Stylesheets)는 햄프턴 캐틀린이 설계하고 나탈리 와이젠바움이 개발한 스타일시트 언어이다. 변수, 네스팅, 믹스인, 반복문, 상속 등의 기능을 제공하여 CSS 코드를 더욱 효율적으로 작성하고 관리할 수 있게 해준다. 현재 공식적으로 지원되는 구현체는 Dart 언어로 작성된 Dart Sass이며, libSass는 2020년 10월에 지원이 중단되었다. Sass는 다양한 IDE에서 지원되어 개발 편의성을 높인다.

2. 역사

햄프턴 캐틀린이 처음 설계하고 나탈리 와이젠바움이 개발하였다.

3. 주요 구현체

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

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

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

4. 기능

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

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

4.1. 변수 (Variables)

Sass에서는 변수를 사용하여 반복되는 값을 쉽게 관리할 수 있다. 변수는 `$` 기호로 시작하며, 콜론(`:`)을 사용하여 값을 할당한다. SassScript는 다음과 같은 데이터 타입을 지원한다.

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

변수는 사용 가능한 여러 함수들 가운데 하나에 대해 매개변수로 사용하거나 결과물이 될 수 있다. 변환 과정 중에 변수의 값들은 출력 CSS 문서에 삽입된다.

4.2. 네스팅 (Nesting)

CSS는 논리적인 중첩을 지원하지만 코드 블록 자체는 중첩되지 않는다. Sass는 서로 간에 중첩된 코드를 삽입할 수 있게 한다.

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

👆

좌우로 밀어서 보기

📌 열 고정 해제

Mixin을 사용한 SCSS, Sass, 컴파일된 CSS 비교

SCSS	Sass	컴파일된 CSS

4.3. 믹스인 (Mixin)

믹스인(Mixin)은 CSS 코드의 재사용성을 높여주는 기능이다. `@mixin` 지시어를 사용하여 정의하고, `@include` 지시어를 사용하여 호출한다. 믹스인은 인자를 받을 수 있어, 동적인 스타일 생성이 가능하다.

CSS는 믹스인 기능을 자체적으로 지원하지 않기 때문에, 같은 코드를 여러 위치에 반복해서 작성해야 하는 경우가 있다. 믹스인을 사용하면 코드 블록을 한 번 정의해두고 필요할 때마다 호출하여 재사용할 수 있다. 믹스인 내에는 임의의 Sass 코드를 포함할 수 있으며, 호출될 때마다 해당 코드가 호출 위치에 삽입된다. 이를 통해 효율적인 코딩과 코드 간략화가 가능하며, 나중에 내용을 변경하기도 쉬워진다.

4.4. 반복문 (Loops)

Sass는 `@for`, `@each`, `@while`과 같은 반복문을 지원하여, 유사한 스타일을 반복적으로 적용해야 하는 경우 유용하다.

Sass는 `@for`, `@each` 및 `@while`을 사용하여 변수를 반복할 수 있으며, 유사한 클래스 또는 ID를 가진 요소에 다른 스타일을 적용하는 데 사용할 수 있다.

4.5. 상속 (Inheritance)

CSS3는 문서 객체 모델(DOM) 계층을 지원하지만 선택자 상속을 허용하지 않는다. Sass에서 상속은 `@extend` 키워드를 사용하고 다른 선택자를 참조하는 코드 블록 내 줄을 삽입함으로써 수행된다. 이 확장된 선택자의 속성은 호출을 하는 선택자에 적용된다. Sass는 다중 상속을 지원한다.

5. IDE 통합

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