둘 다 CSS를 변환하는 빌드 도구지만 출발점이 다르다. Sass(Syntactically Awesome Style Sheets)는 자기 언어(SCSS, Sassy CSS)를 CSS로 번역하는 전처리기(Preprocessor)이고, PostCSS는 표준 CSS를 받아 플러그인 체인으로 변환하는 도구다.
| Sass | PostCSS | |
|---|---|---|
| 입력 | .scss·.sass | .css |
| 문법 | 고정(변수 $x, @mixin, 중첩, @extend, 연산) | 플러그인마다 다름 |
| 동작 | 자체 파서로 파일 전체를 해석 | CSS를 AST(Abstract Syntax Tree)로 파싱하고 플러그인이 순서대로 바꿈 |
| 모르는 문법 | 모르는 at-규칙은 대체로 통과, Sass 문법과 겹치면 에러 | 해당 플러그인이 없으면 그대로 통과 |
- PostCSS 플러그인 예: Tailwind(유틸리티 생성,
@apply처리), Autoprefixer(벤더 접두사(Vendor Prefix) 자동 추가, 크로스 브라우징 참고), cssnano(압축), 중첩 지원 - 중첩·변수(
--x)·@layer처럼 Sass가 먼저 주던 기능이 표준 CSS로 들어오면서 Sass 없이 PostCSS만 쓰는 구성이 흔해졌다
같이 쓸 때 부딪히는 지점
Sass는 파일 전체를 자기 문법으로 해석하므로, Tailwind 전용 구문이 Sass 규칙과 겹치면 파싱 에러를 낸다. Tailwind v4 문서도 Sass·Less 같은 전처리기와 함께 쓰는 것을 전제로 하지 않는다고 밝힌다. 예를 들어 @import "tailwindcss" prefix(tw);의 prefix(tw)는 Tailwind 플러그인이 처리할 옵션이지만 Sass에게는 모르는 문법이다. Tailwind를 불러오는 CSS 파일은 .css로 두고 PostCSS(또는 Tailwind 자체 빌드 도구)만 거치게 하는 것이 안전하다. 참고로 CSS의 @import는 @charset·@layer 선언 말고는 모든 규칙보다 앞에 와야 한다.
이 도구들은 모두 번들러 파이프라인 안에서 돈다. 런타임에 스타일을 만드는 방식과의 비교는 CSS-in-JS와 빌드 타임 CSS 참고.
참고: Sass 공식 문서 · PostCSS