Sass와 SCSS의 차이점

CSS Preprocessor

CSS가 동작하기 전에 사용하는 기능으로 CSS 전처리기 라고 부르며 Sass, Less, Stylus 등이 있다.

웹에서는 CSS만 동작하고 전처리기는 직접 동작시킬 수 없다.

전처리기로 작성하여 웹에서 동작 가능한 표준의 CSS로 컴파일한다.

👉Sass 컴파일 사이트 < SassMeister >

 

 

Sass (Syntactically Awesome Style Sheets)

SCSS는 Sass의 3버전에서 새롭게 등장하여 CSS와 거의 같은 문법으로 호환되며 Sass 기능을 지원하는 CSS의 상위집합이다.

 

 

차이점 ①

 { } 중괄호와  ; 세미콜론의 유무 - Sass (X)  SCSS (O)

 

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을 통해 선언 → @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와 유사한 문법을 가져 코드 통합이 용이하다. (추천)