<aside> ✨

Sass는 ‘Syntactically Awesome Style Sheets’의 약자로, '통사적으로 멋진 스타일 시트’를 뜻 한다.

</aside>

CSS는 그 자체로도 충분히 훌륭한 스타일 시트 언어이지만, 작업이 고도화될수록 불필요한 선택자의 과용과 연산 기능의 한계, 복잡한 코드로 인한 유지 보수의 어려움을 겪게 된다.

Sass는 이러한 CSS의 단점을 보완하고 보다 효율적으로 스타일 시트를 관리하기 위해 만들어진 CSS 전처리기이다.

💡 SCSS란?

SCSS는 CSS의 구문과 완전히 호환되도록 새로운 구문을 도입해 만든, Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset)이다.

기존 Sass와의 가장 특징적인 차이점은 {} (중괄호)와 ; (세미콜론)의 유무에 있다.

SCSS는 CSS의 원래 문법과 크게 다르지 않아 처음 접해도 직관적으로 의미를 이해할 수 있다.

Sass의 기존 문법이 들여쓰기와 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일 에러가 발생할 확률이 적다.

⚡Sass(SCSS) 사용해 보기

<aside> ℹ️

이 페이지는 SCSS 기준으로 작성되었습니다.

</aside>

📌주석(Comment)

Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용한다.

// 컴파일 되지 않는 주석
/* 컴파일 되는 주석 */

Sass

/* 컴파일 되는
 * 여러 줄
 * 주석 */

//Error
* 여러 줄
	* 주석 */

Sass의 경우 컴파일 되는 여러 줄 주석을 사용할 때 각 줄 앞에 * 을 붙여야 하고, 각 * 의 라인을 맞춰 주어야 한다.