1. Introduction

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

Sass는 SASS 표기법(.sass)과 SCSS 표기법(.scss)이 있다. 이전 버전에서는 SASS 표기법이 기본 표기법이었으나 Sass 3.0부터 CSS 친화적인 SCSS（Sassy CSS） 표기법이 기본 표기법이 되었다.
따라서 본 시리즈에서는 Scss표기법을 기본으로 한다

• Sass의 추가 기능과 도구

  • 변수 사용
  • 반복문과 조건문
  • Import
  • Nesting
  • Mixin
  • Extend/Inheritance

• Sass의 장점

  • CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
  • 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
  • CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.

2. Install

$ npm i -g sass

3. Command

3.1 Version

$ sass --version
1.57.1 compiled with dart2js 2.18.6

3.2 Transpiling

1. project 디렉터리를 생성 후 트랜스파일링 할 foo.scss 파일을 생성
2. foo.scss를 아래와 같이 작성

// (foo.scss)
$font_color: #333;
$background_color: #00c;
$font_family: Arial, sans-serif;
$font_size: 16px;

body {
  color: $font_color;

  font: {
    size: $font_size;
    family: $font_family;
  }
}

.container {
  background-color: $background_color;
}

3. project파일로 경로를 이동한 뒤 foo.scss를 트랜스파일링해서 foo.css를 생성

$ cd project
$ sass foo.scss:foo.css

4. 생성된 foo.css 파일

body {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
}

.container {
  background-color: #00c;
}

/*# sourceMappingURL=foo.css.map */

3.2.1 특정 디렉터리 내 모든 파일 트랜스파일링

$ sass src/sass:dist/css

• src/sass 디렉터리의 모든 파일을 dist/css 디렉터리안에 css 파일로 트랜스파일링

• npm script를 이용하여 간단한 명령어로 변경하기위해 package.json 생성

$ cd project
$ npm init -y

• package.json 수정하기

{
  "name": "exsass",
  "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.3 Style

3.3.1 expanded

• 표준 스타일의 css 파일 생성(default)

$ sass --style expanded src/sass:dist/css
# 위와 동일
$ sass src/sass:dist/css

3.3.2 compressed

• 빈공간 없이 압축된 css 스타일

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

3.4 Watch

• scss 파일의 변경을 감지하여 변경될 때마다 scss 파일을 트랜스파일링하여 css 업데이트

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

참조 : poiemaweb