[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를 추천



    본 포스팅은 HEROPY 님의 영상과 블로그를 보고 공부한 내용을 정리한 것입니다.
    https://heropy.blog/2018/01/31/sass/