[Sass/SCSS] Sass와 SCSS는 차이점

Sass와 SCSS는 차이점

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

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

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

• Sass:
  • Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분

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

• SCSS:
  • SCSS는 {}로 범위를 구분

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

• Sass 와 SCSS의 차는 Mixins(‘믹스인’은 재사용 가능한 기능을 만드는 방식의 의미) 사용 방식에도 차이가 있다.

• Sass:

  • Sass는 =와 + 기호로 Mixins 기능을 사용

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

    .box
      +border-radius(10px)

• 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); }

• Sass는 좀 더 간결하고 작성하기 편리하며, {}나 ;를 사용하지 않아도 되니 코드가 훨씬 깔끔해짐

• SCSS는 인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 수월

• 장단점이 있기 때문에 회사나 팀에서 원하는 방식을 사용해야 하거나, 개인 취향에 따라서 선택

• 보통의 경우 SCSS를 추천