CSS 전처리기는 CSS를 더 편하게 쓰기 위해 먼저 가공해 주는 도구예요. 개발자는 SCSS, Sass, Less, Stylus 같은 문법으로 작성하고, 빌드 단계에서 최종 CSS로 변환해요. 브라우저가 직접 이해하는 것은 결국 변환된 CSS예요.
전처리기는 CSS를 더 잘 쓰기 위한 우회로예요
전처리기의 장점은 반복을 줄이고 구조를 나누기 쉬워진다는 데 있어요.
- 변수로 색상과 간격을 재사용해요.
- 믹스인으로 반복되는 선언 묶음을 줄여요.
- 중첩으로 선택자 구조를 읽기 쉽게 써요.
- 함수와 연산으로 토큰을 계산해요.
- partial과
@use로 파일을 나눠 관리해요.
@use './tokens' as *;
$radius: 16px;
@mixin card($padding: 16px) {
padding: $padding;
border-radius: $radius;
border: 1px solid var(--border);
}
.panel {
@include card(20px);
background: var(--surface);
.title {
font-weight: 600;
}
}
이런 문법은 CSS 자체보다 표현력이 좋아 보여요. 특히 디자인 토큰이 많고, 비슷한 컴포넌트가 많은 코드베이스에서 효과가 커요.
그런데 모던 CSS가 많이 따라왔어요
전처리기는 원래 CSS의 빈틈을 메우기 위해 생겼어요. 그런데 지금은 그 빈틈이 꽤 줄었어요. 그래서 "전처리기가 있으면 무조건 편하다"보다 "무엇이 아직도 CSS에 없는가"를 먼저 봐야 해요.
예를 들어 색상 토큰을 재사용하려면 예전에는 Sass 변수가 편했어요. 하지만 이제는 CSS custom properties만으로도 상당 부분 해결돼요. 반대로 컴파일 시점에 값을 고정하고 싶다면 전처리기 변수가 더 적합해요.
모던 CSS는 custom properties, nesting, @layer, calc() 같은 기능을 계속 흡수하고 있어요. 그래서 전처리기는 전부를 대체하는 도구가 아니라, 아직 남아 있는 편의와 레거시를 다루는 도구로 보는 편이 맞아요.
즉, 전처리기는 런타임 기능이 아니라 작성 편의 기능이에요. 브라우저가 빨라지는 게 아니라, 작성과 유지보수가 편해지는 거예요.
언제 쓰고 언제 안 쓰나요
전처리기는 스타일 구조가 크고 반복이 많은 프로젝트에서 여전히 유용해요. 반대로 작은 프로젝트나 최신 CSS 기능만으로 충분한 프로젝트라면 도입 이유가 약해요.
특히 다음 상황에서는 한 번 더 고민해야 해요.
- CSS custom properties만으로도 충분한데 Sass 변수부터 넣으려는 경우
- 중첩을 과하게 써서 선택자 깊이가 깊어지는 경우
- 믹스인이 너무 많아져서 어떤 CSS가 최종으로 나오는지 추적하기 어려운 경우
편해 보인다는 이유만으로 넣으면 오히려 복잡해져요. 전처리기는 도구지 목적이 아니에요.
정리
- CSS 전처리기는 CSS를 더 강력하게 만드는 도구가 아니라 작성 과정을 편하게 만드는 도구예요.
- 모던 CSS가 많은 기능을 흡수했기 때문에, 지금은 필요를 먼저 따져야 해요.
- 반복과 구조가 큰 프로젝트에선 여전히 유용하지만, 작은 프로젝트에서는 오히려 부담이 될 수 있어요.
