CSS가 SCSS의 핵심 기능을 브라우저 자체 기능으로 하나씩 대체하며 전처리기 의존성이 점진적으로 감소하고 있음

Context

SCSS는 변수, 반복문, 함수, 중첩 기능으로 확장 가능한 CSS 작성의 표준이었음. 프로젝트 규모가 커질수록 전처리기 없이는 유지보수가 어렵다고 여겨졌음. CSS는 10년 넘게 SCSS 기능을 브라우저에 직접 구현해오고 있으며, 이 격차가 빠르게 좁혀지고 있음.

Technical Solution

• CSS Custom Properties → 런타임에 동적으로 변경 가능하며 JavaScript 연동이 가능함
• Native Nesting → Chrome 112부터 모든 주요 브라우저에서 사용 가능하며 SCSS와 유사한 구문 제공
• color-mix() → 색상 혼합을 oklch 색공간으로 처리하여 일관된 밝기 보장
• @layer → CSS 고유 순서로 우선순위 관리하여 !important 전쟁 해결
• Container Queries → 뷰포트가 아닌 부모 컨테이너 크기에 반응하는 컴포넌트 구현
• @function과 @mixin → CSS Working Group에서 제안 단계로 진행 중이며 2025~2026년 실험적 지원 예상

Impact

새 프로젝트의 경우 SCSS 없이도 대부분의 기능 구현이 가능함. 기존 프로젝트는 마이그레이션 비용 대비 이점이 크지 않아 SCSS 유지가 합리적임.

Key Takeaway

SCSS의 빌드 타임 검증, 반복문, 구조화된 설정 데이터는 아직 CSS로 완전히 대체 불가능함. 2~3년 내_native CSS만으로 새 프로젝트 시작이 가능할 것으로 예상되며, 그 전까지는 각 도구의 강점을 상황별로 활용하는 것이 현명함.