SCSS 와 SASS의 차이

개요

여러가지 프로젝트를 진행중 sass scss를 동시에 사용하게 되었는데, 매번 문법이 틀려서 고생했던 부분들을 정리해보자

 

 

scss(sass)란?

Syntactically Awesome StyleSheet의 약어이며, CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기

 

.sass란?

sass는 css의 전처리기, 즉 해석되어 css로 컴파일되는 스크립트 언어이다.

기존 우리가 사용하던 sass에서 많이들 들어봤을 mixin, function 등 여러 기능을 제공한다.

 

또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다.

sassScript는 4가지 자료형을 지원하는데, 수(int), 문자열(string), 컬러, 불린(boolean)을 지원한다.

 

.scss란?

scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며,

css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다.

 

scss 와 sass의 차이?

• 문법차이
• 확장자

두가지가 존재한다 확장자는 뭐 *.scss, *.sass라는건 너무 당연하거라 넘어가고 문법차이? 에 대해서 알아보자

 

{ }  ; 의 유무

scss

.text{
  font-size: 20px;
  a{
    color: #ffffff:
  }
}

sass

.text
  font-size: 20px
  a
    color: #ffffff

 

다른글들을 보면 mixin을 사용할 때

• sass가 +으로 정의 = 로 사용
• 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); }

 

하지만, sass에서도 @mixin으로 정의 @include로 사용하는게 가능했으므로 차이라고 할 수는 없을꺼같다...