배경

CSS 내 반복되는 내용을 줄이고 보다 효율적으로 스타일시트를 관리하고 싶다는 필요성
기존 CSS의 단점을 보완하고자 등장

CSS pre-processor?
자기만의 문법을 통해 CSS를 생성해줌

SASS와 SCSS의 차이점

• SCSS는 SASS(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장
• SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해서 만든 SASS의 모든 기능을 지원하는 CSS의 상위집합(Superset)
• 쉽고 간단한 차이로는 {}(중괄호)와 ;(세미콜론)의 차이

-> SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

작성 방법

sass
선택자의 유효범위를 들여쓰기로 구분

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

body
  font: 100% $font-stack
  color: $primary-color

scss
선택자의 유효범위를 {}로 구분

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

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

Mixins(재사용 가능한 기능을 만드는 방식)

scss
SCSS - @Mixin과 @include로 기능 사용

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

컴파일
SCSS(SASS)는 웹에서 직접 동작 할 수 없음