SASS (Syntactically Awesome Style Sheets)

SASS는 CSS전처리기이다. 개발자들이 CSS를 편하게 작성하기 위해서 사용한다.

SASS로 편하게 작성한 후 그것이 브라우저가 읽을 수 있도록 CSS로 컴파일된다.

확장자는 ".scss"를 사용한다.

주의! SPA 라우터 적용시 CSS가 엮일 수 있다.

SASS 특징

1. 변수(Variables)

$를 사용하여 변수 설정이 가능하다.

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. 네스팅(Nesting)

들여쓰기를 통해 태그의 자식-부모 관계를 더욱 명확하게 구분할 수 있다.

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

  li { display: inline-block; }

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

3. 모듈(Modules)과 부분(Partials)

파일명 앞에 _(언더바)가 붙은 것들이 있다. 이 파일들은 다른 주인 파일의 일부분이라는 뜻이다. 이 파일은 import전용으로 사용된다.

// _base.scss (styles.scss과 다른 파일로 나누어져있는 경우이다.)
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}