SCSS는 어떤 기능을 제공하며 브라우저에는 최종적으로 무엇이 전달되나요?

이렇게 답해 보세요 (핵심 답변)

SCSS는 표준 CSS 문법과 호환되는 Sass 전처리기의 구문으로, 변수($), 선택자 중첩, 믹스인(@mixin), 함수와 모듈 분리 같은 작성 편의 기능을 제공합니다. 브라우저는 SCSS 파일을 직접 해석하지 못하므로, 빌드 과정에서 반드시 표준 CSS 파일로 컴파일한 결과물을 브라우저에 전달해야 합니다. 반복 코드를 줄이는 데 유용하지만 중첩을 너무 깊게 쓰면 컴파일된 CSS의 선택자가 길어지고 파일 크기가 불필요하게 커질 수 있습니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. SCSS 변수($var)는 빌드 시점에 고정된 값으로 치환되는 반면, CSS 사용자 지정 속성(--var)은 브라우저 런타임에 DOM을 따라 상속되고 동적으로 바꿀 수 있습니다.
2. @mixin은 선언 블록을 호출 위치마다 복사해 넣기 때문에, 무분별하게 남용하면 최종 출력 CSS에 중복 코드가 많이 생길 수 있습니다.

면접에서 자주 하는 실수

최근 표준 CSS에 추가된 네이티브 중첩(Nesting) 기능과 빌드 타임 전처리기인 SCSS의 모든 기능을 같은 것으로 혼동하지 않아야 합니다.