DIMORIN BLOG

SASS

Introduction

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

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

이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

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

CSS와 비교하여 Sass는 아래와 같은 장점이 있다.

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

Install

Libsass를 Node.js 환경에서 사용하기 위해서는 node-sass를 설치하여야 한다. 따라서 Node.js와 npm이 install되어 있음을 전제로 한다.

$ npm install -g node-sass  
$ node-sass -v

Command

node-sass를 기준으로 설명한다.

$ node-sass  -v
$ cd  my-project
## 특정 파일을 특정 파일 이름으로 컴파일  
## Compile foo.scss to bar.css  
$ node-sass  foo.scss  >  bar.css
## 폴더 내의 모든 파일을 컴파일  
## node-sass input-folder-path -o output-folder-path  
$ node-sass  src/sass  --output  dist/css

nested

sass 형식과 유사하게 nested된 css 파일이 생성된다. 기본값으로 옵션을 추가하지 않아도 기본 적용된다.

$ node-sass  --output-style  nested  src/sass  --output  dist/css

expanded

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

$ node-sass  --output-style  expanded  src/sass  --output  dist/css

compact

여러 룰셋을 한줄로 나타내는 스타일의 css 파일이 생성된다.

$ node-sass  --output-style  compact  src/sass  --output  dist/css

compressed

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

$ node-sass  --output-style  compressed  src/sass  --output  dist/css


https://sass-guidelin.es/ko/
https://poiemaweb.com/sass-basics

← webpack →