[Sass] CSS 전처리기 Sass

CSS 전처리기란?

CSS는 프로젝트 규모가 커지면 쉽게 지저분해지고 유지보수가 어려워지는 단점이 있다.

CSS 전처리기는 이러한 CSS의 한계를 보완하기 위해 자신만의 특별한 문법을 갖고 CSS를 생성하는 프로그램이다.

메타언어로서 추가 기능과 도구를 제공하여 CSS 구문을 개선한다.

 

대표적인 전처리기로는 Sass, LESS, Stylus 등이 있다.

 

Sass 그리고 SCSS

• Sass: Syntactically Awesome StyleSheet
• SCSS: Sassy SCC

 

CSS 전처리기라고 하면 대표적으로 Sass에 대해서 들었을텐데 그 때 꼭 같이 듣게 되는 것이 SCSS이다.

 

Sass는 들여쓰기 감지를 핵심 특성으로 갖는 표기법과 전처리기 두 가지를 의미한다.

Sass는 코드를 작성할 때 중괄호를 사용하지 않고 들여쓰기로 구문을 감지하고 세미콜론을 사용하니 않는다.

이 문법은 css 문법과 다소 차이가 있다.

 

Sass의 개발자들이 CSS와 차이를 좁히기로 결정하면서 등장한 것이 SCSS이다.

 

SCSS는 Sass 3.0에서 등장한 표기법이다. Sass의 기능을 지원하면서 CSS와 거의 같은 문법으로 사용된다는 점에서 각광받고 있다.

 

Sass의 SASS 표기법과 SCSS 표기법에는 이런 차이가 있다.

	SCSS 표기법	SASS 표기법	CSS
중괄호 {}	필요	불필요 (2문자 들여쓰기가 코드 블록을 의미함)	필요
세미콜론 ;	필요	불필요	필요
: 뒤 공백	불필요	필요	불필요
Mixin	@mixin	=	없음
Include	@include	+	없음
확장자	.scss	.sass	.css

 

참고로 Sass, SCSS 등으로 작성된 파일들은 곧바로 웹에서 적용할 수는 없다.

웹은 기본적으로 CSS 파일만 읽을 수 있기 때문에 이 파일들은 별도로 컴파일하는 과정을 거친 후 css 파일로 변환해서 사용한다.