[Sass 문법 정리]1. Sass란?

1. Sass란?

CSS Preprocessor로서 CSS전처리기입니다. 브라우저에서는 CSS만 작동하기 때문에 직접Sass를 동작 시킬 수는 없습니다. Sass는 CSS의  문법과 유사하지만 중첩이나 조건문 반복문 단위연산등이 가능한 프로그래밍 언어입니다. 단, 웹에서는 직접 작동하지 않으므로 CSS로 컴파일 후에 사용가능합니다.

2. Sass와 SCSS의 차이점

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다.

더 쉽고 간단한 차이는 Sass는 {}(중괄호)와 ;(세미콜론)을 생략하여 사용하며, SCSS는 {}(중괄호)와 ;(세미콜론)을 CSS그대로 사용합니다.

3. Sass 컴파일 방법

Sass의 문법을 CSS로 변환해주는 작업입니다. node js, SassMeister, Gulp등으로 컴파일이 가능합니다.

3.1. SassMeister

SassMeister 웹사이트에서 Sass/SCSS의 문법을 실시간으로 CSS문법으로 변환해줍니다.

3.2. Parcel

웹 어플리케이션 번들러 Parcel은 단순하게 컴파일이 가능합니다. 다만 node js의 패키지 매니저 npm이 설치가 선행되어야 합니다.