[Programming / WebApp] CSS 전처리기 – Sass

이 글에서는 CSS 전처리기(Preprocessor)인 Sass의 간단한 사용법 및 컴파일 등에 대하여 알아보고자 합니다.

현재 널리 사용되는 CSS 전처리기는 Sass, LESS, Stylus가 있으며, 이 중 현재 개발자들이 가장 많이 사용하는 전처리기는 Sass입니다.

CSS 전처리기란 무엇인가?

최근 웹페이지의 경향에 있어 CSS 문서 작성이 점점 양이 방대해지고 있는데, 주로 반복적인 작업이 많이 요구되기 때문입니다. 즉, hex 컬러값을 찾는 것과 tag를 닫는 일, 클래스를 상속받아야 하는 것으로 인한 copy & paste 등 비효율적으로 시간이 요구되는 작업이 많습니다.

이것이 CSS 전처리기 등장의 이유이며, 단지 CSS 전처리기는 CSS를 확장하기 위한 스크립팅 언어이며 컴파일러를 통해 CSS 포맷으로 변환합니다.

개발자를 대상으로 한 설문 조사에서는 개발자들이 Sass가 LESS를 더 선호하는 결과가 나왔으며, Google Trend에 서도 Sass와 LESS를 비교해 보면 Sass가 LESS에 비해 더 활발함을 알 수 있습니다.

CSS 전처리기 사용상 장점

CSS 전처리기 사용에 있어 여러가지 장점이 있겠지만 그 중 가장 큰 장점은 아마도 반복작업을 하지 않아도 된다는 것이는 것입니다. CSS 전처리기 사용의 몇 가지 장점을 적어 보았습니다.

1.  재사용성: 반복적인 부분을 스크립트로 처리하거나 변수로 처리할 수 있다.

2.  시간절약

3.  유지관리: 라이브러리화하여 코드의 유지 및 관리가 쉽다.

4.  계산 및 논리

5.  조직화 및 설정이 간단

설치 및 설정

Windows

Windows에서 Sass를 컴파일하려면 Ruby가 설치되어 있어야 합니다. 만약 Ruby가 설치 되어 있지 않다면 http://rubyinstaller.org를 방문하여  설치파일을 다운받아 설치하도록 합니다. 설치가 완료되면, Command Line Tool에서 다음과 같이 입력하여 Sass를 설치합니다.

> gem install sass

Mac OS

Mac OS에는 이미 Ruby가 설치되어 있지만, 업그레이드를 해야 할 경우에는 다음 링크를 참고합니다:

https://gorails.com/setup/osx/10.11-el-capitan

만약 Code Snippet을 Atom을 사용한다면 Atom에 Sass Compiler를 설치하면 편리합니다.

설치하는 방법은 Atom이 메뉴 > File > Settings > Install에서 "sass"를 검색하여 sass-compiler를 설치하거나, Command Line Tool에서 다음과 같이 명령을 입력합니다.

> apm install sass-compiler

이외에도 sass 문법을 auto complete 해주는 도구 autocomplete-sass 및 Sass Syntax Highlighter 등 유용한 도구 많이 있으니 활용하면 좋습니다. Atom 외에도 다양한 코드 편집기의 Sass Compiler 또는 Syntax Highlighter를 지원하는 도구들이 있습니다:

코드 편집기	Sass
SublimeText	Sass Bundle
Notepad++	Notepad-plus-plus
VisualStudio	SassyStudio
TextMate	SCSS.tmbundle
Eclipse	Eclipse platform
Coda	Coda Sass

3rd Party 도구들

Sass와 LESS Compiler를 지원하는 다양한 3rd Party 도구들이 있습니다:

Compiler	Sass Language	Less Language	Mac	Windows
CodeKit	V	V	V
Koala	V	V	V	V
Hammer	V		V
LiveReload	V	V	V	V
Prepros	V	V	V	V
Scout	V		V	V
Crunch		V	V	V

Compile

Compile 방법은 매우 간단합니다. 우선 다음과 같이 예제 Sass 파일을 작성합니다:

Example.sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Command Line Tool을 이용하는 방법

Command Line Tool을 이용할 때에는 다음과 같은 규칙으로 Sass 파일을 Compile합니다.

> sass {INPUT_FILENAME.sass} {OUTPUT_FILENAME.css}

예를 들어 example.sass를 Compile 하려면,

> sass example.sass example.css

와 같이 입력합니다.

3rd Party 도구를 이용하는 방법

Code Kit, Koala 등의 3rd Party 도구를 이용하여 Compile을 할 수 있습니다. 예를 들어, Koala를 설치하여 실행 후 Project Folder를 추가하고 해당 Sass 파일을 선택한 후 Compile 버튼을 클릭하면 됩니다.

코드 편집기를 이용하는 방법

코드 편집기에 Sass Compiler를 설치하여 사용하는 경우입니다. 가령, Atom에 설치된 Sass Compiler를 이용하여 Compile이 가능합니다. 설치된 Compiler에 따라 사용법이 약간씩 다르니, 설치한 Compiler가 제공하는 문서를 참고하도록 합니다.

Examples

이제 Sass의 기본 문법이 되는 몇가지 예제를 다뤄보도록 하겠습니다. 이 예제들은 http://sass-lang.com/guide에 소개된 것들임을 밝혀둡니다.

변수

Sass에서는 아래 문법과 같이 변수를 정의할 때 "$" 키워드를 사용합니다.

[Sass]

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

[CSS]

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting

[Sass]

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

[CSS]

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

Sass는 다른 파일로 작성된 sass 파일을 포함할 수 있는 기능을 제공하여 기능별로 모듈화 할 수 있도록 합니다. Partial은 단순히 파일 이름의 맨앞에 _(underscore)를 붙이기만 하면 된다. 가령 a _partial.sass 로 파일이름을 만들고 @import 로 파일을 포함시킵니다.

[_reset.sass]

// _reset.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

[base.sass]

// base.sass

@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

[base.css]

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixin

Mixin은 특정 CSS를 그룹화하여 반복적이고 성가신 작업을 효율적으로 할 수 있도록 돕습니다. 가령, 클라이언트들은 다양한 브라우저들을 사용하는데 각 브라우저 마다 각각 지정해야 하는 경우가 있습니다. 마치 함수처럼 사용하는 것과 같습니다.

[mixins.sass]

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

[mixinis.css]

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

확장/상속

확장/상속은 마치 OOP의 자식 클래스가 부모 클래스를 확장 또는 상속하는 것과 유사하며, 문법에서 @extend 를 사용합니다.

[extend.sass]

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow

[extend.css]

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

연산자

Sass에서 연산자를 사용하는 것은 매우 유용합니다. Sass는  +, -, *, /,  % 등의 기본 수학 연산자를 제공하며, 반응형 웹을 디자인함에 있어 유용합니다.

[operators.sass]

.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

[operators.css]

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

이로써 Sass에 대한 설치 및 설정방법과 기본 문법 및 몇몇 유용한 예제에 대하여 살펴 보았습니다. 살펴 본 바와 같이 Sass 큰 규모의 HTML 문서를 설계할 때 매우 유용하며, 재사용 및 유지/관리하기에도 매우 유용하기 때문에 CSS를 디자인하는 개발자라면 반드시 고려해 볼만한 가치가 있다고 생각됩니다.