Sass 는 Syntactically Awesome StyleSheets의 약자로, CSS 를 확장한 언어입니다. Sass 를 활용하면 간결하고 재사용이 용이한 CSS 코드를 작성할 수 있으며, 코드의 중복을 피할 수 있습니다. CSS 에 익숙한 개발자라면 문법적으로 유사한 Sass 도 쉽게 배울 수 있습니다.

Sass 는 SASS 표기법(.sass)과 SCSS(.scss) 표기법이 존재하는데, 이번 포스팅에서는 Sass 3.0 부터 기본 표기법으로 채택된 SCSS (Sassy CSS)를 다루도록 하겠습니다.

Install Sass

Sass 를 설치하기 위해선 먼저 Ruby 를 설치해야 합니다.

Windows

Windows 에서는 Ruby Installer 를 다운받아 설치할 수 있습니다. Ruby 를 설치하는 과정에서 PATH 를 추가하면 설치 후 따로 환경 변수를 설정하지 않아도 됩니다. 설치가 완료되고 PATH 도 추가하였다면 터미널에서 다음 명령을 실행합니다.

> gem install sass

Mac

Mac 은 기본적으로 Ruby 가 설치되어있기 때문에 바로 위 명령을 실행하면 됩니다.

$ gem install sass

Nodejs

Nodejs 환경에서 sass 를 사용하려면 node-sass 를 설치하면 됩니다.

$ npm install -g node-sass

Compiling Sass

Sass 는 브라우저에의해 직접적으로 컴파일되지 않습니다. 그리하여 Sass 는 브라우저가 렌더링하기 전 반드시 CSS 로 컴파일되어야 합니다. .scss 파일을 .css 파일로 컴파일하는 방법은 다음과 같습니다.

sass main.scss main.css

sass 명령은 다음과 같이 두 가지 파라미터를 받습니다.

Input 파일 (main.scss)
Ouput 을 출력할 location (main.css)

자, 이제 Sass 를 사용하여 코드를 얼마나 간결하고 읽기 쉽게 작성할 수 있는지 알아보도록 합시다.

Sass Overview

이번 포스팅에서는 다음 두 가지의 개념에 대해서 알아보도록 하겠습니다.

Nests
Variables

Nests

Nesting Selectors

첫 번째로 알아볼 개념은 nesting 입니다. Nesting 이란 특정 CSS selector(선택자)를 다른 selector 의 스코프에 포함시키는 것을 말합니다. 일반적으로 변수의 스코프는 변수가 정의되고 사용 가능한 context 를 지칭합니다. Sass 에서 selector 의 스코프를 { 와 } 사이에 위치한 영역으로 생각하면 쉽습니다.

다른 selector 의 스코프에 포함된 selector 를 children 이라고 부릅니다. 반대로 다른 selector 를 포함하는 selector 를 parent 라고 부릅니다. 이러한 관계는 HTML 태그와 비슷합니다.

.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}

위 코드에서 .child 가 child selector 이고 .parent 가 parent selector 가 됩니다. 위 SCSS 를 컴파일하면 다음과 같은 CSS 파일이 생성됩니다.

.parent {
  color: blue;
}
.parent .child {
  font-size: 12px;
}

Nesting 을 사용함으로써 CSS 에서 나타나는 코드의 중복을 제거하고 두 selector 간의 명확한 DOM 관계를 파악할 수 있습니다. SCSS 가 코드의 가독성을 높이는 이유는 바로 여기에 있습니다.

Nesting Properties

SCSS 에서는 selector 만 nesting 시키는 것 뿐만 아니라 property(속성) 이름 뒤에 : 문자를 추가함으로써 CSS 속성도 nesting 할 수 있습니다.

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

위 코드를 컴파일하면 다음과 같은 CSS 파일이 생성됩니다.

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

Variables

SCSS 는 variables(변수)를 활용할 수 있습니다. 여러 selector 에서 같은 값들을 포함하고 있다면, 이를 변수로 정의하여 참조함으로써 이후 코드의 수정을 최소화 시킬 수 있습니다. 변수를 정의하고 참조할 때 $ 문자를 사용합니다.

$transparent-white: rgba(255, 255, 255, 0.3);

Note: 변수를 사용할 때 하나의 네이밍 규칙을 정의해서 따르는 것이 좋습니다. 그러면 나중에 변수를 쉽게 기억하고 참조할 수 있습니다.

Sass(y) Types

SCSS 변수에 저장할 수 있는 데이터 타입은 다음과 같습니다.

Color - rgb(100, 39, 153), hsl(0, 30%, 100%)
Number - 8.11, 12, 10px
String - "potato", "tomato", span
Boolean - true, false
null

Note: number 타입에 px 과 같은 단위가 포함되어도 string 이 아닌 number 로 간주합니다.

Note: string 타입의 경우 따옴표("") 로 감싸지는 여부는 상관없습니다.

Map & List

위에서 언급한 데이터 타입 외에 list와 map이라는 데이터 타입이 존재합니다.

List 는 space(공백)이나 comma(,)로 구분되는 데이터 타입입니다. List 타입은 다음과 같은 것들이 있을 수 있습니다.

1.5em Hevetica bold;

Helvetica, Arial, sans-serif;

Note: list 데이터는 () 로 감쌀 수 있으며, list 안에 또 list 가 올 수 있습니다.

Map 은 list 와 비슷한데 각 원소들은 key:value 쌍입니다. Map 타입은 다음과 같을 수 있습니다.

(key1: value1, key2: value2);

Review

지금까지 Sass 에 대한 소개와 설치 방법, 그리고 두 가지 핵심 개념에 대해서 알아보았습니다. Sass 를 사용하면 nesting 을 통해 selector 의 DOM 관계를 명확하게 이해할 수 있을 뿐만 아니라 변수를 활용함으로써 코드의 중복을 피할 수 있습니다.

Sass 개념 정리 및 사용 방법