SCSS (Sassy CSS) 완벽 분석
SCSS(Sassy CSS)는 Sass(Syntactically Awesome Stylesheets)의 확장 문법으로,
CSS의 단점을 보완하여 더 강력한 스타일링 기능을 제공하는 CSS 전처리기(Preprocessor)입니다.
✅ CSS와 완전히 호환되며, .scss 확장자를 사용합니다.
✅ 변수, 중첩, Mixin, Extend, 연산, 조건문/반복문 등의 기능을 지원합니다.
✅ CSS보다 유지보수성이 뛰어나고, 코드 재사용성이 높습니다.
✅ 1. SCSS vs CSS 차이점
| CSS | SCSS | |
|---|---|---|
| 변수 지원 여부 | ❌ 없음 | ✅ 있음 ($변수 사용) |
| 중첩(Nesting) 가능 여부 | ❌ 없음 | ✅ 있음 (HTML 구조와 유사) |
| Mixin 사용 가능 여부 | ❌ 없음 | ✅ 있음 (재사용 가능) |
| 연산(수학 계산) 가능 여부 | ❌ 없음 | ✅ 있음 (+, -, *, / 사용 가능) |
| 컴파일 필요 여부 | ❌ 없음 | ✅ 필요 (CSS로 변환 후 사용) |
| 가독성 및 유지보수 | ❌ 낮음 | ✅ 높음 |
✔️ 예제 비교
1️⃣ CSS 스타일링
.button {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}
.button:hover {
background-color: darkblue;
}✅ 문법이 단순하지만, 유지보수 및 코드 재사용이 어렵습니다.
2️⃣ SCSS 스타일링
$primary-color: blue;
.button {
background-color: $primary-color;
color: white;
padding: 10px;
border-radius: 5px;
&:hover {
background-color: darken($primary-color, 10%);
}
}✅ 변수, 중첩, 연산 기능을 활용하여 코드가 더욱 효율적입니다.
✅ 2. SCSS 주요 기능
SCSS는 CSS보다 강력한 기능을 제공하여 유지보수를 쉽게 합니다.
1️⃣ 변수 (Variables)
SCSS에서는 $ 기호를 사용하여 변수를 선언할 수 있으며, 색상, 폰트 크기, 여백 등을 재사용할 수 있습니다.
$primary-color: #3498db;
$font-size: 16px;
.button {
background-color: $primary-color;
font-size: $font-size;
padding: 10px;
}✅ 한 곳에서 변수 값을 수정하면 모든 스타일이 자동으로 변경됩니다.
2️⃣ 중첩(Nesting)
SCSS에서는 HTML 구조와 유사한 중첩(Nesting) 문법을 사용할 수 있습니다.
.navbar {
background: #333;
color: white;
.nav-item {
padding: 10px;
&:hover {
background: gray;
}
}
}➡ CSS 변환 결과:
.navbar {
background: #333;
color: white;
}
.navbar .nav-item {
padding: 10px;
}
.navbar .nav-item:hover {
background: gray;
}✅ 중복되는 클래스명을 줄이고 가독성을 높일 수 있습니다.
3️⃣ Mixin (재사용 가능한 스타일 블록)
Mixin을 사용하면 반복되는 스타일을 함수처럼 정의하고 재사용할 수 있습니다.
@mixin button-style($color) {
background-color: $color;
color: white;
padding: 10px;
border-radius: 5px;
}
.btn-primary {
@include button-style(blue);
}
.btn-danger {
@include button-style(red);
}✅ Mixin을 사용하면 유지보수성이 높아지고 코드 중복이 줄어듭니다.
4️⃣ Extend (스타일 상속)
SCSS에서는 @extend를 사용하여 기존 스타일을 상속할 수 있습니다.
.button {
padding: 10px;
border-radius: 5px;
}
.btn-primary {
@extend .button;
background-color: blue;
}
.btn-danger {
@extend .button;
background-color: red;
}✅ 공통 스타일을 쉽게 재사용할 수 있습니다.
5️⃣ 연산 (Operations)
SCSS에서는 수학 연산을 활용하여 동적으로 스타일을 계산할 수 있습니다.
$base-size: 10px;
.container {
width: $base-size * 10; // 100px
padding: $base-size + 5px; // 15px
}✅ 반응형 디자인에서 유용하게 활용할 수 있습니다.
6️⃣ 조건문 & 반복문
SCSS는 조건문(@if)과 반복문(@for, @each, @while)을 지원하여 동적인 스타일을 적용할 수 있습니다.
✔️ 조건문 (@if, @else)
$theme: dark;
body {
@if $theme == dark {
background: black;
color: white;
} @else {
background: white;
color: black;
}
}✔️ 반복문 (@for, @each)
@for $i from 1 through 3 {
.box-#{$i} {
width: $i * 100px;
}
}➡ CSS 변환 시:
.box-1 {
width: 100px;
}
.box-2 {
width: 200px;
}
.box-3 {
width: 300px;
}✅ 반복적인 스타일을 효율적으로 관리할 수 있습니다.
✅ 3. SCSS 사용 방법 (컴파일 과정)
SCSS는 브라우저에서 직접 사용할 수 없고, CSS로 변환(컴파일)해야 합니다.
SCSS → CSS 변환 방법은 여러 가지가 있습니다.
1️⃣ Node.js + Sass 패키지 사용
npm install -g sass
sass styles.scss styles.css # SCSS → CSS 변환2️⃣ 빌드 도구(Vite, Webpack, Parcel)에서 자동 변환
프론트엔드 프로젝트에서 SCSS를 사용하려면, sass-loader 같은 플러그인을 추가하면 됩니다.
✅ 4. SCSS vs Tailwind CSS vs CSS-in-JS (비교)
| SCSS | Tailwind CSS | CSS-in-JS (styled-components, emotion 등) | |
|---|---|---|---|
| 스타일 구조화 | 변수, 중첩, Mixin 지원 | Utility 클래스 기반 | JavaScript 코드 내부에서 스타일 작성 |
| 유지보수성 | 높은 편 | 어려움 (클래스가 많아짐) | 높은 수준 (컴포넌트별 관리 가능) |
| 성능 | CSS로 변환되므로 성능이 좋음 | 빠름 (CSS 파일이 미리 컴파일됨) | 런타임 스타일링 시 성능 이슈 가능 |
| 사용성 | CSS 확장이라 배우기 쉬움 | 직관적이지만 클래스가 길어질 수 있음 | 동적 스타일링에 유리 |
🎯 결론: SCSS를 언제 사용할까?
✔ CSS의 한계를 극복하고, 유지보수하기 쉽게 스타일을 관리하고 싶을 때
✔ 변수, Mixin, Extend 등을 활용해 체계적인 스타일을 적용하고 싶을 때
✔ CSS를 기반으로 유지하면서도 더 강력한 기능이 필요할 때
✅ SCSS는 CSS의 확장성을 유지하면서도, 코드 재사용성과 유지보수를 크게 향상시켜줍니다. 😊
