STUDY NOTE · 개념 정리
CSS vs SCSS 차이 정리: 전처리기, 변수, 중첩, 믹스인
Frontend
SCSS는 CSS를 더 편하게 쓰기 위한 전처리기(Sass)의 문법이다. 브라우저는 SCSS를 이해하지 못하므로, 빌드할 때 일반 CSS로 컴파일해서 배포한다.
1. 용어 정리
| 용어 | 설명 |
| CSS | 브라우저가 직접 해석하는 스타일 언어 |
| 전처리기 (Preprocessor) | 확장 문법으로 작성하고 CSS로 변환해 주는 도구. Sass, Less, Stylus |
| Sass | 가장 널리 쓰이는 전처리기. 두 가지 문법(SCSS, Sass)을 지원 |
| SCSS | 중괄호와 세미콜론을 쓰는 Sass 문법. CSS와 호환 (.scss) |
| Sass (들여쓰기 문법) | 중괄호·세미콜론 없이 들여쓰기로 구분 (.sass) |
모든 CSS는 그대로 유효한 SCSS다. 그래서 기존 CSS 파일 확장자만 .scss로 바꿔도 동작하고, 필요한 기능부터 점진적으로 쓸 수 있다.
2. 한눈에 비교
| 구분 | CSS | SCSS |
| 실행 | 브라우저가 바로 해석 | 빌드 시 CSS로 컴파일 필요 |
| 변수 | 커스텀 프로퍼티 --color (런타임) | $color (컴파일 타임) + CSS 변수도 사용 가능 |
| 중첩 | 최신 브라우저에서 지원 (CSS Nesting) | 지원 |
| 재사용 | 클래스 조합 | @mixin / @include, @extend |
| 함수·연산 | calc(), color-mix() 등 내장 함수 | 사용자 정의 @function, 반복문(@each, @for), 조건문(@if) |
| 파일 분리 | @import (요청이 늘어남) | @use / @forward로 모듈화, 하나로 합쳐 출력 |
| 디버깅 | 작성한 코드 그대로 | 소스맵 필요 |
3. 변수: $변수 vs CSS 변수
| 구분 | SCSS 변수 ($primary) | CSS 변수 (--primary) |
| 값이 정해지는 시점 | 컴파일할 때 (결과 CSS엔 값만 남음) | 브라우저 실행 중 |
| JS로 변경 | 불가 | 가능 (style.setProperty) |
| 범위 | 블록 / 모듈 단위 | DOM 상속 (요소별로 덮어쓰기 가능) |
| 미디어쿼리 안에서 값 바꾸기 | 불가 (이미 계산됨) | 가능 |
| 대표 용도 | 브레이크포인트, 디자인 토큰 계산 | 다크 모드, 테마 전환 |
// SCSS: 컴파일 후 사라짐
$primary: #6c63ff;
.btn { background: $primary; }
/* CSS: 런타임에 바꿀 수 있음 */
:root { --primary: #6c63ff; }
[data-theme="dark"] { --primary: #8b84ff; }
.btn { background: var(--primary); }
4. SCSS의 주요 기능
중첩 (Nesting)과 & 참조
.card {
padding: 16px;
&:hover { border-color: $primary; } // .card:hover
&__title { font-weight: 700; } // .card__title (BEM)
.icon { width: 20px; } // .card .icon
}
믹스인 (@mixin): 매개변수를 받는 스타일 묶음
@mixin mobile {
@media (max-width: 640px) { @content; }
}
.sidebar {
width: 240px;
@include mobile { display: none; }
}
@extend vs @mixin
| 구분 | @extend | @mixin |
| 결과 | 선택자를 묶어서 같은 규칙 공유 | 사용한 곳마다 스타일 복사 |
| 매개변수 | 불가 | 가능 |
| 주의점 | 선택자가 예상치 못하게 합쳐짐 | 남용하면 CSS 크기 증가 |
모듈 (@use, @forward): _variables.scss처럼 밑줄로 시작하는 partial 파일을 만들고 @use "variables" as v;로 불러온다. 예전 @import는 전역 네임스페이스 충돌 문제로 deprecated 되었다.
5. 요즘은 CSS만으로도 되는 것들
| 기능 | 예전엔 | 지금 CSS |
| 변수 | SCSS $변수 | 커스텀 프로퍼티 --var |
| 중첩 | SCSS | CSS Nesting (주요 브라우저 2023년 지원) |
| 색 계산 | darken(), lighten() | color-mix(), 상대 색상 문법 |
| 계산 | SCSS 연산 | calc(), clamp(), min(), max() |
그래서 새 프로젝트에서는 SCSS 대신 순수 CSS, CSS Modules, Tailwind 같은 유틸리티 CSS를 고르는 경우도 많다. SCSS가 여전히 강한 부분은 믹스인, 반복문, 함수로 스타일을 생성하는 작업이다.
6. 실제로 어떻게 적용되나
- 반응형 브레이크포인트: 브레이크포인트 값을 SCSS 변수와 믹스인으로 정의해 두면 모든 파일에서 같은 기준으로 미디어쿼리를 쓸 수 있다. 값이 컴파일 타임에 고정되는 게 오히려 장점인 경우다.
- 다크 모드: 런타임에 테마를 바꿔야 하므로 CSS 변수를 쓴다. SCSS 변수로는 컴파일 후 바꿀 수 없다.
- 유틸리티 클래스 생성:
@each로 색상 목록을 돌며.text-red,.text-blue같은 클래스를 한 번에 생성한다. - Next.js에서 사용:
sass패키지만 설치하면 .scss 파일과*.module.scss(CSS Modules)를 바로 import할 수 있다. 이 사이트도 예전엔 SCSS와 styled-components가 섞여 있었고, Tailwind로 정리했다.
7. 면접 질문으로 정리
- Q. CSS와 SCSS의 차이는? SCSS는 Sass 전처리기의 문법으로, 변수·중첩·믹스인·함수 같은 기능을 제공하고 빌드 시 CSS로 컴파일된다. 브라우저는 CSS만 해석한다.
- Q. SCSS 변수와 CSS 변수의 차이는? SCSS 변수는 컴파일 타임에 값으로 치환되어 사라지고, CSS 변수는 런타임에 존재해 JS나 미디어쿼리, 상속으로 값을 바꿀 수 있다.
- Q. @mixin과 @extend의 차이는? mixin은 사용하는 곳마다 스타일을 복사하고 매개변수를 받을 수 있으며, extend는 선택자를 묶어 같은 규칙을 공유하게 한다.
- Q. 전처리기를 쓰는 이유는? 반복되는 값과 패턴을 변수·믹스인으로 재사용하고, 중첩과 모듈로 구조를 정리해 유지보수를 쉽게 하기 위해서다.