Sass/SCSS의 부분 파일(Partial Files)과 컴파일 과정

이 설명은 Sass/SCSS의 부분 파일(Partial Files)과 컴파일 과정에 대한 내용입니다. 구체적인 예시로 설명해드리겠습니다.

문제가 되는 상황 예시

1. 잘못된 방식 - 각 파일을 독립적으로 컴파일하는 경우

_variables.scss

$primary-color: #3498db;
$font-size: 16px;

header.scss (부분 파일이 아님)

$primary-color: #3498db;  // 중복 정의
$font-size: 16px;         // 중복 정의

.header {
  color: $primary-color;
  font-size: $font-size;
}

footer.scss (부분 파일이 아님)

$primary-color: #3498db;  // 중복 정의
$font-size: 16px;         // 중복 정의

.footer {
  color: $primary-color;
  font-size: $font-size;
}

이렇게 각각을 컴파일하면:

• header.css와 footer.css에 동일한 변수 정의가 중복 생성
• CSS 코드 크기 증가
• 유지보수 시 여러 곳을 수정해야 함

2. 올바른 방식 - 부분 파일 사용

_variables.scss (부분 파일 - 파일명이 _로 시작)

$primary-color: #3498db;
$font-size: 16px;

_header.scss (부분 파일)

.header {
  color: $primary-color;
  font-size: $font-size;
}

_footer.scss (부분 파일)

.footer {
  color: $primary-color;
  font-size: $font-size;
}

main.scss (메인 파일)

@import 'variables';
@import 'header';
@import 'footer';

부분 파일의 핵심 특징

1. 파일명이 _로 시작 (예: _variables.scss)
2. 독립적으로 컴파일되지 않음
3. @import를 통해서만 다른 파일에 포함됨
4. 최종 CSS에서는 하나로 통합됨

실제 컴파일 결과

올바른 방식으로 main.scss를 컴파일하면:

main.css

.header {
  color: #3498db;
  font-size: 16px;
}

.footer {
  color: #3498db;
  font-size: 16px;
}

변수 정의는 한 번만 처리되고, 최종 CSS에는 실제 사용되는 스타일만 포함됩니다.

이것이 부분 파일이 "중복을 피하고 최종적으로 하나의 CSS 파일로 통합될 때 필요한 조각들을 제공하는 역할"을 한다는 의미입니다.