CSS Pre-Processor 전처리기

CSS Pre-Processor란?

자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램이다.

CSS의 문제점을 프로그래밍 방식, 즉 변수·함수·상속 등 일반적인 프로그래밍 개념을 사용하여 보완한다.

CSS 전처리기에는 다양한 모듈이 존재하는데 그 중에서도 Sass·Less·Stylus가 가장 많이 사용된다.

CSS 전처리기는 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수 있는 재사용성, 임의 함수 및 내장 함수로 인해 개발 시간과 비용 절약, 중첩·상속과 같은 요소로 인해 구조화된 코드 유지 및 관리 용이 등의 장점이 있다.

반면 전처리기를 위한 도구가 필요하고 다시 컴파일하는데 시간이 소요된다는 단점도 존재한다.

 

CSS Pre-Processor 사용률

 

SASS
- 가장 오래된 전처리기. 활발히 개발되고 있으며, 가장 많은 개발자들이 선택한 라이브러리
- Ruby, Node-sass 

Less
- 브라우저에 내장된 JS인터프리터만으로 컴파일 가능하므로 디펜던시에서 자유로움
- Node.js 기반으로 구동되며 Sass다음으로 활발히 개척되고 있어서, 유용한 라이브러리나 mixin 구현물들을 쉽게 찾을 수 있다.

PostCSS. 
- Sass, Less 와 같은 전처리기는 내부에서 제공하는 문법이 정해져있고 한정적이지만 PostCSS는 플러그인이 굉장히 다양하다. 이 때문에 최근 Sass와 Less보다 PostCSS사용에 대한 높은 만족도로 선호도가 올라감.

Stylus
- 상대적으로 프로그래밍 언어의 특징을 많이 포함하고 있습니다.
- CSS 프로퍼티 내에서 연산자나 함수, 루프 등을 비교적 자유롭게 사용할 수 있습니다.
- 반대로 위 특징때문에 문법에 혼재가 있어서 처음 전처리를 시작하는 사람에게는 상대적으로 장벽이 높습니다.