SCSS 대신 CSS를 써야 하는 이유: 네이티브 중첩(Nesting)의 등장

 

📉 "SCSS, 이제 놔줄 때가 되었나?" 네이티브 CSS의 반격 한때 웹 개발의 필수품이었던 SCSS. 하지만 최신 브라우저들이 중첩(Nesting), 변수, 연산 기능을 기본 지원하기 시작했습니다. 컴파일 과정 없이 더 가볍고 강력해진 'Modern CSS'의 현주소를 분석합니다.

📑 Insight 목차

• 1. Game Changer: 드디어 도입된 'CSS 네이티브 중첩(Nesting)'
• 2. 변수의 승리: SCSS 변수($) vs CSS 변수(--)의 결정적 차이
• 3. 기능의 진화: color-mix(), calc() 등 강력해진 내장 함수
• 4. 결론: SCSS는 레거시가 될 것인가?

지난 10년간 프론트엔드 개발자들에게 SCSS(Sass)는 구세주였습니다. 중첩(Nesting) 없는 CSS는 상상할 수 없었고, 변수와 믹스인(Mixin)은 생산성의 상징이었죠.

하지만 2024~2025년을 기점으로 분위기가 바뀌고 있습니다. "굳이 별도 설치와 컴파일이 필요한 SCSS를 써야 해?"라는 의문이 제기되기 시작한 것이죠. 브라우저가 직접 지원하는 순수 CSS(Modern CSS)가 놀라울 정도로 똑똑해졌기 때문입니다.

 

1. Game Changer: 드디어 도입된 'CSS 네이티브 중첩' 🕸️

사람들이 SCSS를 썼던 가장 큰 이유, 바로 Nesting(중첩)입니다. 하지만 2023년 말부터 크롬, 엣지, 사파리, 파이어폭스 등 모든 최신 브라우저가 CSS 중첩을 공식 지원하기 시작했습니다.

과거 (SCSS 필요)

.card {
  padding: 1rem;
  .title { 
    font-weight: bold; 
  }
}

현재 (네이티브 CSS)

/* 브라우저가 바로 이해함 */
.card {
  padding: 1rem;
  & .title { 
    font-weight: bold; 
  }
}

※ 이제 SCSS 컴파일러 없이도 우리가 익숙한 중첩 문법을 그대로 쓸 수 있습니다.

 

2. 변수의 승리: SCSS($) vs CSS(--) 🏆

SCSS 변수(`$color`)는 컴파일 시점에 고정되는 정적 변수입니다. 반면 CSS 변수(`--color`)는 브라우저에서 실시간으로 바뀌는 동적 변수입니다. 이 차이가 왜 중요할까요?

💡 다크 모드 구현의 결정적 차이

• SCSS: 클래스마다 색상을 따로따로 덮어씌우는 코드를 추가해야 함.
• CSS: 자바스크립트로 body의 변수 값 하나만 바꾸면 사이트 전체 색상이 즉시 변경됨.

반응형 웹과 인터랙티브한 디자인이 중요해지면서, 자바스크립트와 소통할 수 있는 CSS 변수(Custom Properties)가 SCSS 변수를 압도하고 있습니다.

 

3. 기능의 진화: 함수와 빌드 도구의 변화 🛠️

"그래도 연산이나 함수는 SCSS가 좋지 않나요?" 옛말이 되어가고 있습니다. 모던 CSS는 연산과 조작 기능도 강력해졌습니다.

기능	SCSS (Sass)	Modern CSS
색상 연산	lighten(), darken()	color-mix(), hsl()
수학 연산	+, -, *, /	calc(), min(), max(), clamp()
레이아웃	믹스인으로 해결	Grid, Flex, Container Queries

여기에 Tailwind CSS 같은 유틸리티 프레임워크가 대세가 되면서, "직접 CSS를 짜는 일" 자체가 줄어든 것도 SCSS 사용 감소의 큰 원인 중 하나입니다.

 

🚀 3줄 요약: 탈(脫) SCSS 현상

✅ 네이티브 중첩: 브라우저가 이제 & { ... } 문법을 알아듣습니다.

✅ 강력한 기능: calc(), color-mix() 등 CSS 함수가 더 우월해졌습니다.

✅ 빌드 간소화: 컴파일러 설정 없는 가벼운 개발 환경이 트렌드입니다.

자주 묻는 질문 ❓

Q: 그럼 이제 SCSS는 아예 안 써도 되나요?

A: 아직은 반반입니다. @mixin이나 @function을 활용한 복잡한 디자인 시스템 구축에는 여전히 SCSS가 강력합니다. 하지만 개인 프로젝트나 간단한 웹사이트라면 네이티브 CSS만으로도 충분합니다.

Q: Tailwind CSS를 쓰면 SCSS는 필요 없나요?

A: 네, 거의 필요 없습니다. Tailwind는 유틸리티 클래스 기반이라 CSS 파일을 직접 작성할 일이 거의 없고, 필요한 경우에도 PostCSS를 통해 최신 CSS 기능을 사용하므로 SCSS의 설 자리가 좁아졌습니다.

Q: 브라우저 호환성 문제는 없나요?

A: CSS Nesting 등 최신 기능은 2023년 이후 브라우저에서 대부분 지원합니다. 단, 인터넷 익스플로러(IE) 같은 구형 브라우저를 반드시 지원해야 한다면 여전히 SCSS나 PostCSS 같은 전처리기가 필요할 수 있습니다.

마무리: 도구는 가볍게, 기능은 강력하게 💻

기술은 돌고 돕니다. 한때 CSS의 부족함을 채우기 위해 탄생했던 SCSS가 이제는 발전한 CSS에게 그 자리를 내어주고 있습니다.

"컴파일 없는 개발 환경"이 주는 가벼움과 속도를 경험해 본 개발자들은 다시 SCSS로 돌아가지 않고 있습니다. 다음 프로젝트에서는 .scss 대신 .css 파일을 생성해 보시는 건 어떨까요? 웹 표준의 놀라운 진화를 직접 느끼실 수 있을 겁니다.