[Sass] 1강 – CSS Preprocessor와 Sass 소개

CSS는 정말 간단하고 단순한 구문을 가지고 있다. Selector로 특정 엘리먼트를 선택하고, Property를 지정해주어 스타일을 표현한다. 이 간편함은 분명 CSS의 장점이나, 치명적인 단점으로도 작용 할 수 있다.

시간이 갈수록 웹은 점점 복잡해지고, 규모가 거대해지고 있다. 반복되는 코드가 많아지고, 수많은 재사용성이 요구된다. 그런 상황에서 CSS는 한계에 봉착하게 된다. 같은 스타일을 적용할 요소들이 많아지면 같은 여러줄의 코드를 복사해야하며, 수정이 필요할 때에는 찾기 기능을 활용하여 하나씩 수정해야한다. 유지보수가 어려워 진 것이다.

이런 문제점 속에서 사람들은 CSS Preprocessor (전처리기) 를 만들게 된다. CSS Preprocessor란, CSS에서 확장된 언어로써 Transpile을 해주면 CSS로 바뀌게 된다. (Compile 라고 표현하기도 한다.) 현존하는 CSS Preprocessor 는 Sass, Less, Stylus 가 있다. Sass가 가장 오래되었고, Stylus가 가장 나중에 릴리즈 되었다. 이 중에서 나는 Sass를 선택했다.

What is Sass?

Sass는 Syntactically Awesome Style Sheet 의 줄임말으로써 문법적으로 개쩌는 스타일 시트 라고 번역할 수 있다. 왜 문법적으로 개쩌는지는 직접 Sass 를 사용해보시면서 알아가보자.

Why Sass?

Sass는 Less와 Stylus와 비교되는 장점을 가지고 있다.

  • 가장 오래된 CSS Preprocessor 이다. 성숙도 자체가 높고, 가장 큰 커뮤니티를 가지고 있다.
  • Eco-System이 가장 넓다.
  • SassSCSS 2가지 문법을 제공한다.

Sass VS SCSS

결론부터 말하자면, 현재 권장되는 문법은 SCSS이다. Sass 와 SCSS 의 기능은 서로 차이가 없으나, Sass 문법은 기존 CSS와 문법이 상당히 달라 새로운 언어를 보는 기분이 들 것이다. Sass 문법은 마치 파이썬 같다. 중괄호 ( {} ) 와 세미콜론 ( ; ) 을 없애버렸다. 하지만, 이런 문법의 변경은 상당히 낯설고 불편할 수 있다. 그렇기에 본 강의에서도 기본적으로 문법은 SCSS 를 사용한다.

예제

간단한 예제를 이용하여 Sass가 무엇인지 감을 잡아보자.

컴파일 전 (example.scss)

/* this is comment */
/*
	multi line comment
*/

// single line comment (only sass)

$blue-color: #0000ff; //변수선언
$color-calc: #030303 * 2; //색상 연산

body {
  color: $blue-color; //변수 사용
}

.card {

  font-size: 10pt;
  width: 3582.24px - 1452.32px; //숫자 연산

  span { //네스팅 (nesting)
    color: red;
  }

  &-title { //부모참조
    color: $color-calc;
    font-size: 30pt;
  }

}

컴파일 결과 (example.css)

/* this is comment */
/*
	multi line comment
*/
body {
  color: #0000ff;
}

.card {
  font-size: 10pt;
  width: 2129.92px;
}
.card span {
  color: red;
}
.card-title {
  color: #060606;
  font-size: 30pt;
}

일단 눈에 띄는 것이 // 를 사용한 한줄짜리 주석 기능이 새로 생긴 것이다. 이는 트랜스파일을 하게 되면 없어진다. $ 를 사용해 변수를 선언하고, 사용할 수 있으며 Nesting 기능을 활용해 편리한 코딩이 가능해졌다.

+, -, *, / 연산자를 활용하여 숫자 연산은 물론이고 색상 연산도 가능하다.

설치

사실 Sass 는 Ruby 기반으로 작동되는 Preprocessor 이다. 하지만 Sass compiler 를 C 로 포팅한 libsass 가 등장하고, node.js 로 그것을 바인딩한 node-sass 의 등장으로 굳이 Ruby를 사용하지 않아도 Sass compile 이 가능하다. 그러므로 이 강의에서는 node-sass 를 사용한다.

sudo npm install -g node-sass

npm 글로벌 옵션으로 설치한다.

컴파일 하기

위에 있는 예제 SCSS 파일을 직접 작성하여, example.scss 파일로 저장하자. 그리고 다음 명령어를 사용하여, css 파일로 컴파일을 해보자.

node-sass ./example.scss -o ./

정상적으로 example.css 파일이 컴파일되어 생성되었다면 성공한 것이다!

이번 강의에서는 CSS Preprocessor 와 Sass 의 개념 그리고 node-sass 를 이용한 컴파일 맛보기를 해보았다. 다음 강의부터는 node-sass 의 상세한 사용법과 Sass의 여러가지 문법과 기능을 알아보도록 할 것이다.