CSS를 효율적으로 관리하고 유지보수하기 위해 많은 웹 퍼블리셔들이 SCSS(Sass)를 활용합니다. 특히, Mixin, Nesting, Extend, Variables 같은 고급 기능을 사용하면 CSS 코드의 재사용성을 높이고 가독성을 개선할 수 있습니다. 주요 고급 기능을 실전 예제와 함께 살펴보고, 퍼블리싱 최적화에 활용하는 방법을 설명합니다.
1. SCSS(Sass)란 무엇인가?
SCSS(Sass)는 Sass(Syntactically Awesome Stylesheets)의 한 형태로, CSS의 확장 언어입니다. 기존 CSS의 단점을 보완하고, 재사용성을 높이며 유지보수가 용이한 스타일 작성 방식을 제공합니다.
✅ 주요 장점
✔️ 변수(Variables) 사용 가능 → 색상, 폰트 크기 등 재사용 가능
✔️ 중첩(Nesting) 지원 → CSS 구조를 직관적으로 유지
✔️ Mixin과 Extend로 코드 중복 최소화
✔️ CSS 기능 확장 → 조건문, 반복문 활용 가능
2. 변수(Variables) 활용법
변수를 사용하면 색상, 폰트 크기, 레이아웃 크기 등을 한 곳에서 관리할 수 있어 유지보수가 용이합니다.
📌 실전 예제: 색상과 폰트 변수 정의
// 변수 정의
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: "Roboto", sans-serif;
// 변수 사용
body {
font-family: $font-stack;
color: $primary-color;
}
button {
background-color: $secondary-color;
color: white;
}
✅ 장점
- 디자인 시스템 적용 용이
- 일괄 수정 가능 → 변수 값만 변경하면 전체 스타일에 적용됨
3. Mixin: 코드 재사용성 극대화
Mixin은 반복되는 스타일을 저장하고 필요할 때 호출하는 기능입니다. 이를 활용하면 코드 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.
📌 실전 예제: 반응형 미디어 쿼리 Mixin
@mixin responsive($breakpoint) {
@if $breakpoint == mobile {
@media (max-width: 600px) { @content; }
} @else if $breakpoint == tablet {
@media (max-width: 1024px) { @content; }
}
}
// 사용 예시
.container {
width: 80%;
@include responsive(mobile) {
width: 100%;
}
}
✅ 장점
- 미디어 쿼리를 한 번만 정의하면 여러 곳에서 재사용 가능
- 다양한 디자인 패턴을 손쉽게 적용 가능
4. Nesting: 직관적인 스타일 구조 작성
기존 CSS는 클래스를 중첩해서 적용할 때 중복 코드가 많아집니다. Nesting 기능을 사용하면 이를 해결할 수 있습니다.
📌 실전 예제: 버튼 스타일 적용
.button {
background: #3498db;
color: white;
padding: 10px 20px;
&:hover {
background: darken(#3498db, 10%);
}
&.primary {
background: #2ecc71;
}
}
✅ 장점
- CSS의 계층 구조를 그대로 유지할 수 있음
- 중복 코드 감소
5. Extend: 중복 스타일 제거
Extend 기능을 사용하면 여러 요소에서 동일한 스타일을 공유할 수 있습니다.
📌 실전 예제: 버튼 스타일 공통화
%button-base {
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
}
.button {
@extend %button-base;
background: #3498db;
color: white;
}
.button-secondary {
@extend %button-base;
background: #2ecc71;
color: white;
}
✅ 장점
- 공통 스타일을 손쉽게 적용 가능
- CSS 파일 크기 감소 (반복되는 코드가 제거됨)
6. 실전 적용: SCSS(Sass)를 활용한 반응형 카드 UI
이제 SCSS(Sass)의 고급 기능을 적용한 실제 디자인 예제를 만들어보겠습니다.
// 변수 설정
$primary-color: #3498db;
$border-radius: 10px;
// Mixin 정의
@mixin card-shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
// 카드 스타일
.card {
background: white;
border-radius: $border-radius;
padding: 20px;
@include card-shadow;
h2 {
color: $primary-color;
}
p {
font-size: 14px;
}
}
✅ 이 코드에서 활용된 기능
✔️ 변수($primary-color, $border-radius) 사용
✔️ Mixin(card-shadow) 적용
✔️ Nesting(h2, p 내부 스타일 정의)
이처럼 SCSS(Sass)를 활용하면 유지보수가 쉬운 CSS 구조를 만들 수 있습니다.
📌 SCSS의 고급 기능을 활용하면 웹 퍼블리싱을 효율적으로 진행할 수 있습니다.
1️⃣ 변수(Variables) 활용 → 색상, 폰트, 레이아웃 값을 쉽게 관리
2️⃣ Mixin으로 코드 재사용 → 반복적인 스타일을 최소화
3️⃣ Nesting으로 직관적인 CSS 구조 유지
4️⃣ Extend로 중복 코드 제거 → 스타일 최적화
SCSS는 단순한 CSS 대체제가 아니라, 퍼블리싱을 더 빠르고 효율적으로 만드는 강력한 도구입니다.
