# SCSS 컴파일 가이드

## 폴더 구조

### 대장(엔트리) 파일
최종적으로 CSS로 컴파일되는 파일들. HTML에서 직접 링크되는 대상.

```
scss/
├── default.scss          # 모든 페이지 공통 CSS (공통으로 1번 링크)
├── main.scss            # 메인 페이지 전용
├── about/
│   ├── intro.scss       # 소개 페이지
│   ├── history.scss     # 연혁 페이지
│   └── map.scss         # 오시는 길 페이지
└── notice/
    ├── list.scss        # 공지사항 목록
    └── detail.scss      # 공지사항 상세
```

### 부품(공통) 파일
대장 파일이 `@import`로 끌어다 쓰는 파트들. 언더스코어(`_`)로 시작하여 단독 컴파일 제외.

```
scss/
├── common/
│   ├── layout/
│   │   ├── _header.scss    # 헤더 스타일
│   │   ├── _footer.scss    # 푸터 스타일
│   │   └── _fixed-btn.scss # 고정 버튼
│   ├── component/
│   │   ├── _button.scss     # 버튼 컴포넌트
│   │   ├── _input.scss      # 입력 컴포넌트
│   │   └── _board.scss      # 게시판 컴포넌트
│   ├── common.scss          # 리셋 및 공통 스타일
│   ├── color-root/          # CSS 변수
│   └── content/             # 섹션 너비 등
└── mixin/
    └── ui-mixin.scss        # Mixin 함수들
```

## 컴파일 명령어

### 개발 모드 (확장된 스타일, 소스맵 포함)
```bash
npm run sass:dev
```

### 개발 모드 (파일 변경 감지 - 자동 컴파일)
```bash
npm run sass:watch
```

### 프로덕션 빌드 (압축된 스타일)
```bash
npm run sass:build
```

## 컴파일 결과

- 소스: `scss/` 폴더
- 결과: `css/` 폴더 (자동 생성)
- 대장 파일만 CSS로 생성됨 (언더스코어 파일은 제외)

## default.scss 사용법

`default.scss`는 모든 페이지에서 공통으로 사용하는 CSS입니다.

### HTML에서 사용
```html
<!-- 모든 페이지에서 공통으로 링크 -->
<link rel="stylesheet" href="/css/default.css" />
<!-- 페이지별 CSS -->
<link rel="stylesheet" href="/css/main.css" />
```

### 특징
- `default.css`로 별도 컴파일
- 다른 대장 SCSS에 import하지 않음
- 모든 HTML에서 공통으로 1번만 링크

## 대장 파일 작성 예시

```scss
// scss/about/intro.scss
@charset "utf-8";

/* component */
@import "../common/component/_button";
@import "../common/component/_input";

/* about/intro 페이지 전용 스타일 */
.intro-section {
  // ...
}
```

## 사용 예시

1. 대장 SCSS 파일 작성: `scss/main.scss`
2. 부품 SCSS 파일 작성: `scss/common/component/_button.scss` (언더스코어로 시작)
3. 개발 중 자동 컴파일: `npm run sass:watch`
4. CSS 파일 생성: `css/main.css`, `css/default.css`
5. HTML에서 링크:
   ```html
   <link rel="stylesheet" href="/css/default.css" />
   <link rel="stylesheet" href="/css/main.css" />
   ```