• css 파일의 크기가 커지고 내용이 많아짐에 따라 css 파일을 관리하기가 힘들어진다. sass 는 preprocesser 이다. css 에는 없는 1) variables 2) nesting 3) mixins 4) inheritance 를 사용할 수 있다. sass 파일을 통해 작업하면 css 파일로 compile 된다.
• scss 는 sass 의 3 버전이다. css 문법과 거의 유사하기 때문에 css 와 통합하기 쉽다는 장점이 있다.

Variables

자주 사용하는 css 값을 변수에 저장해서 사용할 수 있다. 색상이나 글꼴 등을 변수에 저장하면 좋다.

$font-stack: Helvetica, sans-serif;

Nesting

html 처럼 nesting 하여 계층적으로 사용할 수 있다. 너무 많은 nesting 을 하면 유지보수에 힘들기 때문에 좋지 않다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

Mixins

자주 사용하는 css 선언들을 묶어서 하나의 덩어리로 만들고 재사용할 수 있다.

@mixin 이름() {
  선언1;
  선언2;
  선언3;
}

Partials

유지보수를 위해서 scss 파일을 작은 단위로 쪼갤 수도 있다. 작은 단위로 쪼갠 scss 파일은 파일명 맨 앞에 _ 를 붙여준다. 예를 들어 _header.scss 이렇게. partial scss 파일을 사용할 때는 @use 를 쓴다.

이외에도 scss 에는 편리한 기능이 많다. 아래 공식 문서에서 확인하자.

sass 공식 문서
더 읽으면 좋을 자료