모듈화(@use)와 폴더 구조 설계

실무에서는 수천 줄의 SCSS를 한 파일에 작성하지 않습니다. 변수, 믹스인, 리셋, 레이아웃, 컴포넌트 별로 파일을 쪼개서 관리합니다. 파일명 앞에 언더스코어(_)를 붙이면 독립적인 CSS 파일로 컴파일되지 않는 '부분 파일(Partial)'이 됩니다.

메인 파일인 style.scss에서 @use 키워드를 사용해 조각난 파일들을 하나로 불러와 조립합니다. (과거에는 @import를 썼지만, 이름 충돌 문제로 현재는 @use를 권장합니다.)

폴더명 (7-1 Pattern 예시)	포함되는 파일 (Partials)	역할 설명
abstracts/	`_variables.scss`, `_mixins.scss`	실제 CSS 코드는 출력하지 않고 변수와 믹스인만 정의
base/	`_reset.scss`, `_typography.scss`	HTML 태그 기본 스타일 및 웹 폰트 초기화
components/	`_buttons.scss`, `_cards.scss`	재사용 가능한 UI 컴포넌트 단위의 스타일
layout/	`_header.scss`, `_footer.scss`	사이트의 전반적인 골격과 레이아웃 스타일

실제 적용 예시 (@use 활용)

파일명 앞에 언더스코어(_)를 붙여 부분 파일(Partial)을 만들고, 메인 파일에서 @use로 불러옵니다. 불러올 때 자동으로 네임스페이스가 생성되며, as 키워드를 사용해 네임스페이스를 원하는 대로 변경할 수 있습니다.

_variables.scss (변수 모음)

$primary: #4f46e5;
$font-stack: 'Helvetica Neue', sans-serif;

_mixins.scss (믹스인 모음)

@mixin box-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

main.scss (메인 파일)

// 불러올 때 확장자(.scss)와 언더스코어(_)는 생략 가능합니다.
@use 'variables' as v;
@use 'mixins' as m;

.module-test {
  // 네임스페이스(v., m.)를 통해 접근하므로 이름 충돌이 절대 발생하지 않습니다!
  font-family: v.$font-stack;
  color: v.$primary;
  @include m.box-shadow;
  
  padding: 20px;
  border-radius: 8px;
}

컴파일된 최종 CSS

.module-test {
  font-family: "Helvetica Neue", sans-serif;
  color: #4f46e5;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
}

심화: @forward를 활용한 패키징

파일이 많아지면 @use를 수십 번 작성해야 해서 불편할 수 있습니다. 이럴 때 @forward를 사용하면 여러 부분 파일들을 하나의 진입점(Entry point) 파일로 묶어서 다른 곳에 일괄 내보낼 수 있습니다. (JavaScript의 export * from '...' 패턴과 유사합니다.)

abstracts/_index.scss (진입점)

/* 여러 파일을 묶어서 내보냅니다. */
@forward 'variables';
@forward 'mixins';
@forward 'functions';

/* 이제 main.scss에서는 abstracts 폴더만 한 번 @use로 불러오면 
   모든 변수와 믹스인을 한꺼번에 사용할 수 있습니다! */

⚠️ 주의: @import는 곧 폐기됩니다.

Sass 공식 문서에 따르면 @import는 전역 스코프 오염과 중복 컴파일로 인한 성능 문제 때문에 조만간 완전히 폐기될 예정입니다. 새로 작성하는 모든 프로젝트에서는 반드시 @use를 사용해야 하며, 네임스페이스를 통해 명시적으로 변수와 믹스인에 접근해야 합니다.