Preprocessing
CSS 로 구성된 스타일시트는 사이즈가 커지면서 복잡해지고 유지보수가 어려워진다. Sass 는 CSS 에는 없는 변수(Variables), 중첩구조(nasting), 재사용(mixin, include), 상속(inheritance) 을 제공하여 CSS 를 좀 더 실용적으로 만들 수 있게 한다.
대부분의 작업은 터미널에서 이루어진다. Sass 를 인스톨한 후 터미널에 sass input.scss output.css 를 실행할 수 있다. preprocessing 작업 진행 시 개별적인 파일이나 전체 디렉토리를 볼 수 있는데 추가적으로 --watch 플래그를 통해 가능하다. 아래는 Sass 를 실행하면서 전체 디렉토리를 살펴보는 예제이다.
### bash
$ sass --watch app/sass:public/stylesheets
Variables
변수는 프로그래밍에서 사용하는 변수와 같은 의미로 스타일시트 전반적으로 재사용이 필요한 값을 저장해두는 역할을 한다. 색상, 폰트와 같은 값을 저장해 두고 재사용할 수 있다. Sass 는 $ 심볼을 이용하여 변수를 만든다.
### SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sass 를 처리할 때, $font-stack 과 $primary-color 를 정의하고, 출력 CSS 에는 변수 값이 위치를 지정한다. 사이트 전반적으로 사용하는 브랜드 컬러의 작업을 할 때 극히 강력함을 보여준다.
### CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
References
- http://sass-lang.com/guide