CSS를 사용하다 보면, 반드시 만나게 되는 CSS 전처리기 들(Sass, Less, Stylus). 그 중 Sass에 대해 정리해보고자 한다.

CSS 전처리기?

Sass를 CSS 전처리기(Preprocessor)라고 하였다. 그럼 전처리기 라는 것은 무엇이고, 왜 필요하며, 어떤 역할을 하는 것일까?

1. CSS 전처리기, 무엇인가?

CSS 전처리기란, 전처리기의 자신만의 특별한 syntax(문법)을 가지고, CSS를 생성하도록 하는 프로그램을 말하며, 대표적으로 Sass, Less, Stylus 등이 있다.

2. 왜 필요할까?

CSS를 사용해 보면 알 수 있듯이, CSS는 배우기에는 매우 간단한 언어이지만, 프로젝트가 커질 수록, 코드 가독성이 낮아지고 지저분해지는 것을 알 수 있다. 이러한 결점을 보완하고 추가적인 기능을 제공하기 위해 CSS 전처리기가 등장하게 되는 것이다.

3. 역할은 무엇인가?

웹에서는 CSS만 동작하게 된다. 즉, CSS 전처리기들은 동작하지 않는다는 뜻이다. 그렇기 때문에, CSS 전처리기는 자신들만의 편한 syntax를 제공하면서도 웹에서 작동하게 하기위해, 작성된 파일을 CSS로 생성(compile)하도록 할 필요가 있는 것이다.