SCSS 디자인 패턴 완벽 가이드

프로젝트의 CSS 코드를 체계적으로 관리하는 SCSS 디자인 패턴을 알아봅니다. 변수, 중첩, 믹스인 등 실무에서 자주 사용되는 핵심 패턴들을 실용적인 예제와 함께 배워보세요.

---

---

들어가며

이 글에서는 SCSS 디자인 패턴 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 변수_활용_패턴
2. 중첩_규칙_패턴
3. 부모_참조_패턴
4. 믹스인_재사용_패턴
5. 매개변수_믹스인_패턴
6. 파셜_모듈화_패턴
7. 조건문_패턴
8. 반복문_패턴
9. 함수_활용_패턴
10. 플레이스홀더_확장_패턴
11. 맵_자료구조_패턴
12. 네임스페이스_패턴

---

1. 변수 활용 패턴

개요

SCSS 변수를 사용하여 색상, 폰트, 간격 등을 중앙에서 관리하고 일관성을 유지합니다.

코드 예제

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;

.button {
  background-color: $primary-color;
  font-size: $font-size-base;
}

설명

변수에 값을 저장하면 프로젝트 전체에서 재사용할 수 있어 유지보수가 쉬워집니다.

---

2. 중첩 규칙 패턴

개요

선택자를 중첩하여 HTML 구조를 반영하고 코드의 가독성을 높입니다.

코드 예제

.nav {
  background: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: white;
      }
    }
  }
}

설명

부모 선택자 안에 자식 선택자를 중첩하여 계층 구조를 명확히 표현할 수 있습니다.

---

3. 부모 참조 패턴

개요

&(앰퍼샌드)를 사용하여 부모 선택자를 참조하고 수정자나 상태를 간결하게 작성합니다.

코드 예제

.button {
  background: blue;

  &:hover {
    background: darkblue;
  }

  &--primary {
    background: green;
  }

  &__icon {
    margin-right: 5px;
  }
}

설명

&는 부모 선택자를 참조하여 hover 상태나 BEM 패턴을 쉽게 구현할 수 있습니다.

---

4. 믹스인 재사용 패턴

개요

@mixin으로 재사용 가능한 스타일 블록을 정의하고 @include로 적용합니다.

코드 예제

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  @include flex-center;
  padding: 20px;
}

설명

자주 사용하는 스타일 조합을 믹스인으로 만들어 코드 중복을 줄일 수 있습니다.

---

5. 매개변수 믹스인 패턴

개요

믹스인에 매개변수를 전달하여 유연하고 동적인 스타일을 생성합니다.

코드 예제

@mixin box($width, $height, $bg) {
  width: $width;
  height: $height;
  background: $bg;
}

.small-box {
  @include box(100px, 100px, red);
}

설명

매개변수를 받는 믹스인으로 다양한 상황에 맞는 스타일을 만들 수 있습니다.

---

6. 파셜 모듈화 패턴

개요

파일을 _파셜.scss로 분리하고 @use로 불러와 프로젝트를 모듈화합니다.

코드 예제

// _variables.scss
$primary: #3498db;

// _buttons.scss
@use 'variables';

.btn {
  background: variables.$primary;
}

설명

스타일을 기능별로 분리하여 관리하기 쉽고 확장 가능한 구조를 만듭니다.

---

7. 조건문 패턴

개요

@if, @else를 사용하여 조건에 따라 다른 스타일을 적용합니다.

코드 예제

@mixin theme($dark: false) {
  @if $dark {
    background: #333;
    color: white;
  } @else {
    background: white;
    color: #333;
  }
}

설명

조건문으로 테마나 상태에 따라 동적으로 스타일을 변경할 수 있습니다.

---

8. 반복문 패턴

개요

@for, @each를 사용하여 반복적인 스타일을 자동으로 생성합니다.

코드 예제

@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: #{$i * 10}px;
  }
}

// 결과: .mt-1, .mt-2, .mt-3, .mt-4, .mt-5

설명

반복문으로 여백, 그리드 등의 유틸리티 클래스를 자동 생성할 수 있습니다.

---

9. 함수 활용 패턴

개요

@function으로 값을 계산하고 반환하는 사용자 정의 함수를 만듭니다.

코드 예제

@function rem($px) {
  @return #{$px / 16}rem;
}

.title {
  font-size: rem(24);  // 1.5rem
  padding: rem(16);    // 1rem
}

설명

함수로 px를 rem으로 변환하는 등 복잡한 계산을 간단하게 처리합니다.

---

10. 플레이스홀더 확장 패턴

개요

%플레이스홀더로 공통 스타일을 정의하고 @extend로 상속받습니다.

코드 예제

%button-base {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  @extend %button-base;
  background: blue;
}

설명

플레이스홀더는 CSS로 컴파일되지 않고 상속받는 곳에서만 적용됩니다.

---

11. 맵 자료구조 패턴

개요

$맵 변수로 키-값 쌍을 저장하고 map-get()으로 값을 가져옵니다.

코드 예제

$colors: (
  primary: #3498db,
  success: #2ecc71,
  danger: #e74c3c
);

.alert {
  color: map-get($colors, danger);
}

설명

맵으로 관련된 값들을 그룹화하여 체계적으로 관리할 수 있습니다.

---

12. 네임스페이스 패턴

개요

@use로 모듈을 불러오고 네임스페이스를 지정하여 충돌을 방지합니다.

코드 예제

@use 'colors' as c;
@use 'typography' as t;

.header {
  background: c.$primary;
  font-size: t.$heading-size;
}

설명

네임스페이스로 같은 이름의 변수가 충돌하지 않도록 안전하게 관리합니다.

---

마치며

이번 글에서는 SCSS 디자인 패턴 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#SCSS #Variables #Mixins #Nesting #Partials