핵심 Sass | 7-1 패턴

7-1 패턴(7-1 Pattern)은 Sass(SCSS) 스타일 파일을 모듈화하여 관리하는 구조적인 방법이다. 프로젝트의 규모가 커질수록 스타일 파일이 복잡해지는데, 이를 정리하고 유지보수하기 위해 사용하는 방식이다.
이 패턴의 이름은 "7개의 폴더 + 1개의 메인 SCSS 파일" 구조에서 유래되었다.

---

폴더 구조

/scss
│── abstracts/    # 변수, 믹스인, 함수 (재사용 가능한 유틸리티)
│── base/         # 기본 스타일 (리셋, 타이포그래피, 기본 요소 스타일)
│── components/   # 버튼, 카드, 네비게이션 같은 개별 UI 컴포넌트
│── layout/       # 전체적인 레이아웃 구조 (헤더, 푸터, 사이드바 등)
│── pages/        # 페이지별 스타일 (홈, 로그인, 대시보드 등)
│── themes/       # 테마 관련 스타일 (라이트 모드, 다크 모드 등)
│── vendors/      # 외부 라이브러리 (Bootstrap, Normalize.css 등)
│── main.scss     # 모든 SCSS 파일을 import하는 메인 파일

---

폴더 설명

abstracts/ (추상 요소)

• 프로젝트에서 반복적으로 사용되는 요소들을 정의하는 폴더이다.
• 변수, 믹스인, 함수 등이 포함된다.

예제

// abstracts/_variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// abstracts/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

base/ (기본 스타일)

• 브라우저 기본 스타일을 리셋하고, 전체적인 타이포그래피 및 기본적인 요소 스타일을 정의한다.

예제

// base/_reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-bod;
}

// base/_typography.scss
body {
  font-family: 'Arial', sans-serif;
  color: #333;
}

components/ (컴포넌트)

• 버튼, 카드, 모달 등 재사용 가능한 UI 요소들을 관리하는 폴더이다.

예제

// components/_button.scss
.btn {
  padding: 10px 15px;
  border-radius: 5px;
  background-color: $primary-color;
  color: white;
}

layout/ (레이아웃)

• 헤더, 푸터, 사이드바 등 전체적인 페이지 구조와 관련된 스타일을 정의한다.

예제

// layout/_header.scss
.header {
  background-color: $primary-color;
  padding: 20px;
}

pages/ (페이지별 스타일)

• 개별 페이지(홈, 로그인, 대시보드 등)마다 필요한 스타일을 따로 관리하는 폴더이다.

예제

// pages/_home.css
.home {
  background-color: #f5f5f5;
}

themes/ (테마)

• 다크 모드, 라이트 모드 같은 여러 개의 테마 스타일을 정의한다.

예제

// themes/_dark.scss
body {
  background-color: #121212;
  color: white;
}

vendors/ (외부 라이브러리)

• Normalize.css, Bootstrap 등 외부 스타일 파일을 관리하는 폴더이다.

예제

// vendors/_bootstrap.scss
@import "bootstrap";

---

main.scss (메인 SCSS 파일)

모든 SCSS 파일을 하나로 묶어 컴파일할 단일 엔트리 포인트 역할을 한다.

// main.scss
@import "abstracts/variables";
@import "abstracts/mixins";

@import "base/reset";
@import "base/typography";

@import "layout/header";
@import "layout/footer";

@import "components/button";
@import "components/card";

@import "pages/home";
@import "pages/about";

@import "themes/dark";

---

7-1 패턴을 사용하는 이유

• 모듈화: 유지보수와 확장성이 뛰어남
• 가독성 증가: 파일별로 역할이 명확해짐
• 재사용성 강화: 변수, 믹스인, 컴포넌트 활용 가능
• 협업 효율 증가: 팀원 간 스타일 관리가 쉬워짐

---

정리

7-1 패턴은 대규모 프로젝트에서 SCSS 파일을 체계적으로 관리하는 좋은 방법이다.
작은 프로젝트에서는 필요 없을 수도 있지만, 프로젝트가 커질수록 유지보수하기 훨씬 쉬워지므로 적극적으로 활용하는 것이 좋다.