Sass, SCSS

Sass, SCSS는 웹에서 직접 동작할 수 없다. 최종적으로 표준 CSS로 동작해야 하며, 전처리기로 작성 후 CSS로 컴파일해야 한다.

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.

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

Sass와 SCSS의 코드 상의 차이

{}와 ;의 유무로 구분할 수 있다.

Sass

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

Mixins(믹스인, 재사용 가능한 기능을 만드는 방식)에서도 차이가 난다.
Sass는 =와 +로 Mixins 기능을 사용하고, SCSS는 @mixin과 @include를 사용한다.

Sass

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

SCSS

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

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

.......