SASS와 SCSS의 차이점

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

더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다.

 

/* 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;
    }
  }
}

Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분한다.

거의 유일하지만, 다른 차이도 있다.
아래는 Mixins(‘믹스인’은 재사용 가능한 기능을 만드는 방식의 의미한다) 예제이다.
Sass는 단축 구문으로 사용한다.

/* 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); }

Sass는 =와 + 기호로 Mixins 기능을 사용했고,
SCSS는 @mixin과 @include로 기능을 사용했다.
Sass는 좀 더 간결하고 작성하기 편리하며, {}나 ;를 사용하지 않아도 되니 코드가 훨씬 깔끔하다.
SCSS는 인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽다.

이렇게 몇몇 장단점이 있기 때문에 회사나 팀에서 원하는 방식을 사용해야 하거나, 개인 취향에 따라서 선택할 수 있다.
단지 상황에 맞는, 원하는 방식으로 골라서 사용하면 된다.

보통의 경우 SCSS를 추천한다.