[ SASS/SCSS 입문 ] SASS와 SCSS 차이 이해하기

 

 

웹개발을 위한 CSS의 진화

---

웹 디자인과 개발의 세계에서 스타일시트의 중요성은 두말할 나위가 없습니다. 

CSS(Cascading Style Sheets)는 웹 페이지의 디자인을 정의하는 데 사용되는 언어입니다. 

그러나 CSS의 제한성으로 인해 개발자와 디자이너는 보다

효율적이고 유지관리가 용이한 방법을 모색해 왔습니다.

 

이러한 필요에서 탄생한 것이 바로

Sass(Syntactically Awesome Stylesheets)와

그의 후예인 SCSS(Sassy CSS)입니다.

 

 

 

Sass (Syntactically Awesome Stylesheets)

 

Sass는 2006년에 처음 도입되었으며, 

웹 개발자들 사이에서 CSS의 한계를 극복하기 위한 솔루션으로 빠르게 자리 잡았습니다. 

Sass의 핵심 목표는 CSS의 재사용성, 가독성, 확장성을 향상시키는 것이었습니다. 

Sass는 CSS의 전처리기로써 복잡한 웹 페이지 디자인을 보다 쉽게 구현할 수 있는 

다양한 기능(변수, 중첩 규칙, 믹스인 등)을 제공함으로써 이 목표를 달성하였습니다.

전처리기로 작성된 Sass코드는 CSS로 컴파일을 거친 후 사용할 수 있습니다.

 

 

SCSS

 

SCSS는 Sass의 3버전에서 도입된 새로운 문법으로, CSS와 호환되는 문법을 제공합니다. 

이는 기존 CSS를 Sass 프로젝트로 쉽게 전환할 수 있게 해주며, 

CSS를 이미 알고 있는 개발자들에게 더 친숙하게 다가갈 수 있게 해줍니다.

 

 

 

 

Sass와 SCSS의 문법차이

---

Sass와 SCSS의 가장 큰 차이점은 문법 구조입니다. 

Sass(원래 문법)는 들여쓰기를 사용하여 스타일 규칙을 정의하며, 

중괄호({})와 세미콜론(;)을 사용하지 않습니다. 

 

반면 SCSS는 CSS와 동일한 문법 구조를 가지고 있으며, 

중괄호와 세미콜론을 사용하여 스타일을 정의합니다.

 

예를 들어, 색상 변수를 사용하는 경우 Sass와 SCSS에서는 다음과 같이 작성됩니다.

 

Sass : 

$default-color: #e86b88

body
  color: $default-color

 

SCSS :

$default-color: #e86b88

body {
  color: $default-color;
}

 

 

 

두 문법 선택의 기준

---

Sass와 SCSS 중 어떤 것을 사용할지 결정하는 것은 

주로 개인의 선호도와 프로젝트의 요구 사항에 달려 있습니다. 

SCSS는 CSS와의 호환성 때문에 새로운 사용자에게 더 접근하기 쉬울 수 있습니다. 

반면, Sass는 더 간결한 문법을 선호하는 개발자들에게 매력적일 수 있습니다.

 

 

 

 

변환 도구 및 통합 개발 환경(IDE) 지원 상황

---

Sass와 SCSS는 모두 웹 개발 도구와 IDE에서 광범위하게 지원됩니다. 

대부분의 현대적인 웹 개발 환경에서는 Sass/SCSS 파일을 실시간으로 

순수한 CSS로 컴파일하는 기능을 제공합니다. 

이는 웹 개발 프로세스를 보다 효율적으로 만들어줍니다. 

 

예를 들어, Webpack, Gulp, Grunt 같은 빌드 도구들은 Sass/SCSS 파일을 처리하는 여러 플러그인을 제공합니다.

또한, Visual Studio Code, Atom, Sublime Text 같은 인기 있는

코드 편집기들도 Sass와 SCSS를 지원하는 확장 프로그램을 가지고 있어,

개발자들은 보다 편리하게 코드를 작성하고 관리할 수 있습니다.

 

이러한 도구들은 Sass/SCSS 코드를 CSS로 변환할 뿐만 아니라,

에러를 찾아내고, 코드를 압축하여 프로덕션 환경에 최적화된 스타일시트를 생성하는 기능도 제공합니다.

이는 웹 페이지의 로딩 시간을 단축시키고, 전반적인 사용자 경험을 향상시키는데 기여합니다.