CSS vs SCSS: 무엇을 선택해야 할까?

 

 

 

 

CSS(Cascading Style Sheets)

📌 웹 스타일링을 위한 표준 스타일 언어.

     브라우저가 기본적으로 바로 해석할 수 있으며, 모든 웹 프로젝트에서 필수적으로 사용

• 별도의 컴파일 과정이 없다
• 모든 브라우저가 지원
• 단순하고 직관적
• 기본 기능 중심 → 반복되는 코드가 많아질 수 있음

 

 

SCSS(Sassy CSS)

📌 Sass(Syntactically Awesome Style Sheets)의 문법 중 하나

    기존 CSS 문법과 100% 호환되지만 많은 추가 기능을 제공하는 전처리기

    작성한 SCSS는 컴파일 과정을 거쳐 CSS로 변환

• 변수, 함수, 네스팅 등 강력한 기능 제공
• 코드 재사용성 극대화
• 구조적인 스타일 설계 가능
• 유지보수 효율 높음

💡전처리기

코드를 실제로 사용되기 전에 미리 ‘가공’하여 다른 형태의 코드로 변환해주는 도구
즉, 개발자가 더 편하게 작성한 코드를 브라우저나 시스템이 이해할 수 있는 형태로 바꿔주는 변환기

 

💡SCSS 전처리기 동작 방식

1. 개발자가 SCSS 같은 전처리기 문법으로 스타일을 작성
2. 빌드 단계에서 빌드 도구(Webpack, Vite, Sass CLI 등)가 SCSS 코드를 읽어 해석
   SCSS 파일 변경 감지 시 전처리기에 변환 요청(Sass compiler(예: dart-sass)를 호출)
3. 전처리기는 SCSS를 일반 CSS로 변환
4. 빌드 도구가 변환된 CSS를 최적화, 압축, 변환, 번들링 등 후처리하여 CSS 품질 향상
5. 브라우저는 최종 CSS를 로딩하여 스타일을 적용

 

 

 

 

CSS vs SCSS 비교

항목	CSS	SCSS
변수 지원	제한적 :root {   --primary: #3498db; } button {   color: var(--primary); }	지원 $primary: #3498db; button {   color: $primary; }
네스팅 (CSS 선택자를 구조적으로 중첩해서 작성할 수 있는 기능)	최신 브라우저 일부 지원 .nav ul li a {   color: red; }	안정적, 강력(컴포넌트 기반 개발 매우 유용) .nav {   ul {     li {       a {         color: red;       }     }   } }
재사용 기능	없음	mixin(코드 재사용), extend(상속) @mixin flex-center {   display: flex;   justify-content: center;   align-items: center; } .box {   @include flex-center; } --------------------------------------------- .message {   padding: 10px;   border-radius: 6px; } .success {   @extend .message;   background: green; }
컴파일	필요 없음	필요
생산성	보통	높음

 

 

 

 

결론: CSS vs SCSS, 어떤 것을 선택할까?

📌 SCSS를 사용하면 좋은 경우

• 중규모~대규모 프로젝트
• 반복되는 스타일이 많을 때
• CSS 아키텍처(BEM, OOCSS 등)를 더 체계적으로 적용하고 싶을 때
• React/Vue 프로젝트에서 컴포넌트별 스타일을 모듈화할 때

📌 CSS로 충분한 경우

• 매우 단순한 랜딩 페이지
• Tailwind CSS 같은 Utility-first 프레임워크를 사용할 때(SCSS 기능과 충돌하거나, 사용 자체가 의미가 줄어듬)
• styled-components / Emotion 등 CSS-in-JS 환경(이미 변수, 중첩, 함수형 스타일 등을 자연스럽게 제공)