_fonts.scss에서 밑줄(_)을 앞에 붙이는 이유

_fonts.scss에서 밑줄(_)을 앞에 붙이는 이유

🎯 주요 이유: Sass 부분 파일(Partial) 표시

1. 컴파일 제외 기능

• _(밑줄)로 시작하는 Sass 파일은 별도의 CSS 파일로 컴파일되지 않음
• _fonts.scss → 컴파일되지 않음
• fonts.scss → fonts.css로 컴파일됨

2. 모듈화와 구조화

// _fonts.scss (부분 파일)
@font-face {
  font-family: 'MyFont';
  src: url('../fonts/myfont.woff2') format('woff2');
}

// main.scss (메인 파일)
@use 'fonts'; // _와 .scss 확장자 생략

body {
  font-family: 'MyFont', sans-serif;
}

3. 임포트 방식

// 올바른 사용법
@use 'fonts';       // _ 생략, 확장자 생략
@import 'fonts';    // _ 생략, 확장자 생략

// 잘못된 사용법  
@use '_fonts';      // _ 포함 (동작하지만 컨벤션 위반)
@import '_fonts.scss'; // _ 포함 + 확장자 포함 (불필요)

4. 파일 구조 예시

sass/
├── _fonts.scss     // 부분 파일 (컴파일 제외)
├── _variables.scss // 부분 파일 (컴파일 제외)
├── _mixins.scss    // 부분 파일 (컴파일 제외)
├── main.scss       // 메인 파일 (컴파일 대상)
└── styles.scss     // 메인 파일 (컴파일 대상)

5. 컴파일 결과

css/
├── main.css        // _fonts.scss 내용이 여기에 포함됨
├── styles.css      // _fonts.scss 내용이 여기에 포함됨
└── fonts.css       // 생성되지 않음!

💡 실제 프로젝트 예제

_fonts.scss 내용

// _fonts.scss
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

main.scss에서 사용

// main.scss
@use 'fonts';

body {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
}

🚫 흔한 실수

1. 중복 컴파일 방지
2. // _fonts.scss (부분 파일) → CSS로 컴파일되지 않음 // fonts.scss (일반 파일) → fonts.css로 컴파일됨 (중복 발생!)
3. 의도치 않은 CSS 파일 생성 방지
   • 부분 파일은 메인 파일에 포함되어야 하는 코드 조각
   • 별도 CSS 파일로 생성되면 안 됨

✅ 정리

• _fonts.scss: 부분 파일(Partial), 컴파일되지 않음
• fonts.scss: 일반 파일, 별도 CSS로 컴파일됨
• @use 'fonts': _와 확장자를 생략하여 import
• 목적: 코드 모듈화 + 중복 컴파일 방지 + 깔끔한 파일 구조

이 컨벤션은 Sass의 강력한 모듈 시스템의 기반이 되어大型 프로젝트에서도 체계적인 스타일 관리를 가능하게 합니다!

Der Grund für das Anbringen des unterstrichenen (_) in den _fonts.scss