#1 - Sass vs SCSS

Sass와 SCSS란?

Sass와 SCSS는 CSS를 보완/확장하기 위한 '전 처리기'이다.

'전 처리기'라고 불리는 이유는 아래와 같이 CSS가 동작하기 전에 Sass와 SCSS가 위치하기 때문이다.

 

Sass와 SCSS사용시, 웹에 반영되는 과정

1. Sass또는 SCSS를 사용하여 쉽게 스타일을 작성
2. CSS 문법으로 변환
   1. 문법이 변환되는 것을 compile이라고 한다.
3. CSS가 동작하여 웹에 적용 된다.

위 내용과 같이 Sass와 SCSS는 웹에 직접 동작하지 않고, Compile 과정을 거쳐 CSS 언어로 변환된다는 것이 큰 특징이다.

 

Sass vs SCSS

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

그래서 큰 범위에서 보면 Sass가 SCSS를 포함하고 있는 개념이지만, 실제 사용 방법이나 디테일이 조금씩 다르다.

Sass와 SCSS의 차이점을 알아보자

 

Sass

Syntactically Awesome Style Sheets의 약자다.

SCSS보다 먼저 나왔다.

{}중괄호와 ;세미콜론을 사용하지 않는다.

 

ul
  width : 100%
  height : 100%
  li
    width : 50%
    height : 50%

SCSS

Sassy CSS의 약자다.

Sass보다 뒤에 나왔다.

{}중괄호와 ;세미콜론을 사용한다.

 

ul {
  width : 100%;
  height : 100%;
  li {
    width : 50%;
    height : 50%;
}

그래서 뭐쓸까?

아래 블로그에 내용과 같이 범용성과 호환성 때문에 SCSS를 권장한다고 한다.

그리고 막상 사용해보니 SCSS와 CSS가 꽤나 흡사해서 개인적으로는 CSS가 손에 익었다.

 

---

 

#참고 내용

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!

 

#참고 내용

https://designmeme.github.io/ko/blog/write-sass-with-scss/

Sass는 SCSS로 쓰세요