[SASS]SASS,SCSS 어느것을 사용하면 좋을까? 차이점 살펴보기

초기 버전의 Sass는 들여쓰기를 사용하여 구문을 정의하는 특이한 문법을 가졌습니다.

그러나 이러한 문법은 일부 사용자에게 혼란을 줄 수 있었고, CSS와의 호환성이 떨어졌습니다. 이에 따라 나중에 SCSS가 도입되었습니다.

 

SCSS는 CSS와 거의 동일한 구문을 가지고 있기 때문에 CSS를 작성하던 개발자들이 쉽게 스위칭할 수 있었습니다. 또한 SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 구문을 정의하기 때문에 CSS와의 호환성이 더 높았습니다. 이러한 이유로 SCSS가 Sass보다 더 인기 있고 널리 사용되고 있습니다.

 

결국, Sass와 SCSS는 모두 Sass의 구현 형태 중 하나이며, 프로젝트에 따라 선택할 수있습니다. 그러나 대부분의 경우 SCSS가 더 일반적으로 사용되며, Sass보다 더 널리 알려져 있습니다.

 

차이점

Sass와 SCSS는 모두 Sass(Syntactically Awesome Style Sheets)의 구문 확장입니다.

이 두 가지 형식은 다음과 같은 차이점이 있습니다.

- 구문 형식

Sass: 들여쓰기로 구분되며 중괄호 {} 및 세미콜론 ;을 사용하지 않습니다.

SCSS: 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 거의 동일한 구문을 따릅니다.

 

- 가독성

Sass: 들여쓰기를 사용하기 때문에 가독성이 높고, 간결한 문법을 가지고 있습니다.

SCSS: 중괄호와 세미콜론을 사용하기 때문에 CSS와 유사하여 CSS를 작성하던 사람들에게 익숙하고 쉽게 스위칭할 수 있습니다.

 

- 호환성

Sass: CSS와의 호환성이 좋지 않습니다.

기존의 CSS 코드를 Sass로 변환하는데 추가 작업이 필요할 수 있습니다.

SCSS: CSS와의 호환성이 뛰어나며, 기존의 CSS 코드를 쉽게 SCSS로 변환할 수 있습니다.

 

- 파일 확장자

Sass: .sass 확장자를 사용합니다.

SCSS: .scss 확장자를 사용합니다.

보통 프로젝트의 요구에 따라 선택되는데, CSS와의 호환성 및 쉬운 스위칭을 원하는 경우 SCSS가 더 일반적으로 사용됩니다.

 

SASS와 SCSS 문법 비교

 - SASS

/* sass */
$primary-color: #FF6347

.container
  width: 100%
  
  .header
    background-color: #333
    color: #FFF

 

- SCSS

/* SCSS */
$primary-color: #FF6347;

.container {
  width: 100%;
  
  .header {
    background-color: #333;
    color: #FFF;
  }
}

 

참고

반응형

https://sass-lang.com/guide/

Sass: Sass Basics