Sass의 소개, 설치와 간단한 명령어 사용법

1. Introduction

Sass(Syntactically Awesome StyleSheets)는 CSS per-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 확장(extension) 기능이다.

CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없어 보이지만 프로젝트의 규모가 커지면서 수정이 빈번히 발생하여 쉽게 지저분해지고 유지보수도 어려워진다.

Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공하여 CSS의 한계를 보완하고 있다.

- 변수의 사용

- 조건문과 반복문

- Import

- Nesting

- Mixin

- Extend/Inheritance

Sass의 장점

- CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.

- 스킬 레벨이 다른 팀원들과 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.

- CSS에는 존재하지 않는 Mixin 등의 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

2. Install

브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.scss) 파일을 css 파일로 컴파일(트랜스파일링)해야 한다. 따라서 Sass 환경 설치가 필요하다.

Sass는 Ruby로 처음 개발 되어 Ruby Sass를 C++로 포칭한 Libsass, node.js 환경에서 Libsass를 사용할 수 있는 node-sass 등 다양한 포팅 버전이 등장하였다. Sass는 최근에 Dart Sass로 재구현되었다.

다음 명령을 사용하여 Sass를 설치한다.

$ npm install -g sass

3. Command

1. version

$ sass --version
1.30.0 compiled with dart2js 2.10.4

2. 트랜스파일링

sass-project 디렉터리를 생성하고 트랜스파일링할 foo.scss 파일을 아래와 같이 생성하자.

$site_max_width: 960px
$font_color: #333;
$link_color: #00c;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: percentage(20px / $font_size);

body {
  color: $font_color;
    
  // property Nesting
  font: {
    size: $font_size;
    family: $font_family;
  }
    
  line-height: $line_height;
}

#main {
  width: 100%;
  max-width: $site_max_width;
}

트랜스 파일링할 SCSS 파일의 경로와 트랜스파일링 후 생성될 css 파일의 경로를 지정한다.

# foo.scss를 트랜스파일링해서 foo.css를 생성
$ sass foo.scss:foo.css

foo.scss 파일이 트랜스파일링되어 다음과 같이 foo.css 파일이 생성된다.

body{
  color: #333;
  font-size: 16px;
  font-family: Arail, sans-serif;
  line-height: 125%;
}

#main {
  width: 100%;
  max-width: 960px;
}

특정 디렉터리 내의 모든 scss 파일을 css 파일로 일괄 트랜스파일링해서 지정한 디렉터리에 저장하려면 인풋 디렉터리와 아웃풋 디렉터리를 지정한다.

# sass input-directory-path:out-put-directory-path
$ sass src/sass:dist/css

npm scripts를 사용하면 매번 긴 명령어를 입력하지 않고 좀 더 간단히 명령어를 사용할 수 있다. 프로젝트 디렉터리에 아직 package.json이 없다면 다음 명령으로 package.json을 생성한다.

$ npm init -y

생성된 package.json을 다음과 같이 수정한다.

{
  "name": "sass-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:sass": "sass src/sass:dist/css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

이제 다음과 같은 명령어로 좀 더 간단히 트랜스파일링할 수 있다.

$ npm run build:sass

3. style

scss 파일을 트랜스파일링하여 css 파일을 생성할 때 2가지 스타일 중 하나를 선택할 수 있다.

expanded

표준적인 스타일의 css 파일이 생성된다. 기본값이다.

$ sass --style expanded src/sass:dist/css
$ sass src/sass:dist/css
# 같은 결과가 만들어진다.

compressed

가능한 빈공간이 없는 압축된 스타일의 css 파일이 생성된다.

$ sass --style compressed src/sass:dist/css

4. watch

watch 옵션은 scss 파일의 변경을 감지하여 변경될 때마다 scss 파일을 트랜스파일링하여 css 파일을 자동 업데이트한다.

$ sass --watch src/sass:dist/css

4. SASS vs SCSS

Sass에는 SASS 표기법(.sass)과 SCSS 표기법(.scss)이 있다. 이전 버전에서는 SASS 표기법이 기본 표기법이었으나 Sass3.0 부터 CSS 친화적인 SCSS 표기법이 기본 표기법이 되었다.