_partial.scss 개념

파셜(Partial)이란?

파셜은 "일부"라는 의미로, 다른 파일에서 불러와 사용하는 SCSS 파일입니다.
언더스코어(_)로 시작하는 파일은 컴파일되지 않고 다른 파일에서만 사용되므로, 변수·믹스인·컴포넌트를 모듈 단위로 분리해 재사용하고 관리하는 핵심 개념입니다.

기본 개념

파셜은 언더스코어(_)로 시작하는 파일로, 독립적으로 컴파일되지 않고 다른 파일에서 불러와서 사용합니다.

								// _variables.scss (파셜 파일)
								$color-primary: #0a58ca;
								$color-secondary: #6c757d;

								// 이 파일은 컴파일되지 않음
								// 다른 파일에서 불러와서 사용

파일을 불러올 때는 언더스코어를 생략합니다.

								// main.scss (메인 파일)
								@use "variables";  // _variables.scss 불러오기

								.button-group {
									.button {
										background: variables.$color-primary;
									}
								}

언더스코어(_)의 의미

파일명 앞에 _(언더스코어)를 붙이면 SCSS 컴파일러가 이 파일을 컴파일하지 않습니다.

파일명
컴파일 여부
용도

_variables.scss

컴파일 안 됨

다른 파일에서 불러와 사용
variables.scss

컴파일됨

독립적으로 컴파일되는 파일
main.scss

컴파일됨

최종 CSS로 컴파일되는 메인 파일

언더스코어를 붙이면 "이 파일은 다른 곳에서 불러와 쓰는 파일이다"라는 의미입니다.

파셜 파일의 특징

파셜 파일은 다음과 같은 특징을 가집니다:

컴파일되지 않음: 언더스코어로 시작하는 파일은 CSS로 컴파일되지 않음
재사용 목적: 다른 파일에서 불러와서 사용하기 위한 파일
모듈화: 관련 있는 코드를 하나의 파일로 묶어서 관리
네이밍 규칙: 파일명 앞에 언더스코어(_)를 붙임

파셜 파일 사용 예시

파셜 파일을 실제로 어떻게 사용하는지 예시를 살펴봅니다.
파셜 생성 → 메인 파일에서 불러오기 → 컴파일 과정을 단계별로 따라가면, 실무에서 변수·믹스인·컴포넌트를 어떻게 모듈화하는지 바로 적용할 수 있습니다.

기본 사용법

파셜 파일을 만들고 메인 파일에서 불러오는 기본 예시입니다.

1단계: 파셜 파일 생성

									// _variables.scss
									$color-primary: #0a58ca;
									$color-secondary: #6c757d;
									$spacing-md: 16px;

2단계: 메인 파일에서 불러오기

									/* main.scss */
									@use "variables";

									.button {
									  background: variables.$color-primary;
									  padding: variables.$spacing-md;
									}

3단계: 컴파일 결과

									.button {
									  background: #0a58ca;
									  padding: 16px;
									}
									/* _variables.scss는 컴파일되지 않음 */
									/* main.scss만 컴파일됨 */

여러 파셜 파일 사용

메인 파일에서 여러 파셜 파일을 불러와 사용하는 예시입니다.

								// main.scss
								@use "variables";  // _variables.scss
								@use "mixins";      // _mixins.scss
								@use "buttons";     // _buttons.scss
								@use "cards";       // _cards.scss

								// 각 파셜 파일의 변수와 믹스인 사용
								.button {
								  @include mixins.button-base;
								  background: variables.$color-primary;
								}

이렇게 하면 각 파셜 파일의 내용이 메인 파일에 포함되어 하나의 CSS 파일로 컴파일됩니다.

파셜 파일 네이밍 규칙

파셜 파일의 네이밍 규칙을 알아봅니다.
언더스코어 필수, 불러올 때 생략 규칙 등을 정확히 이해해 두면, 팀 프로젝트에서 일관된 파일 구조를 유지하고 실수로 인한 컴파일 오류를 방지할 수 있습니다.

언더스코어 필수

파셜 파일은 반드시 언더스코어(_)로 시작해야 합니다.

								/* ✅ 올바른 파셜 파일명 */
								_variables.scss
								_mixins.scss
								_buttons.scss

								/* ❌ 잘못된 파셜 파일명 (컴파일됨) */
								variables.scss
								mixins.scss
								buttons.scss

언더스코어가 없으면 독립적으로 컴파일되어 CSS 파일이 생성됩니다.

불러올 때 언더스코어 생략

파셜 파일을 불러올 때는 언더스코어를 생략합니다.

								/* 파일명: _variables.scss */
								/* 불러올 때: @use "variables"; (언더스코어 생략) */

								@use "variables";  /* _variables.scss 불러오기 */
								@use "mixins";     /* _mixins.scss 불러오기 */
								@use "buttons";    /* _buttons.scss 불러오기 */

SCSS 컴파일러가 자동으로 언더스코어를 찾아서 파일을 불러옵니다.

네이밍 가이드

파셜 파일의 좋은 네이밍 예시를 살펴봅니다.

								// 기능별 네이밍
								_variables.scss    // 변수
								_mixins.scss       // 믹스인
								_buttons.scss      // 버튼 컴포넌트
								_cards.scss        // 카드 컴포넌트

								// 카테고리별 네이밍
								_base.scss         // 기본 스타일
								_layout.scss       // 레이아웃
								_components.scss   // 컴포넌트
								_utilities.scss    // 유틸리티

파일명만 봐도 무엇을 담고 있는지 알 수 있도록 명확하게 네이밍하는 것이 좋습니다.

파셜 파일의 역할

파셜 파일이 프로젝트에서 어떤 역할을 하는지 살펴봅니다.

코드 모듈화

파셜 파일은 관련 있는 코드를 하나의 모듈로 묶어서 관리합니다.

								// _variables.scss (변수 모듈)
								$color-primary: #0a58ca;
								$color-secondary: #6c757d;

								// _mixins.scss (믹스인 모듈)
								@mixin button-base { }
								@mixin card-base { }

								// _buttons.scss (버튼 모듈)
								.button { }
								.button-primary { }

								// 각 모듈이 명확한 역할을 가짐

재사용성 향상

파셜 파일은 다른 프로젝트에서도 재사용할 수 있습니다.

								// 프로젝트 A에서 만든 _variables.scss
								// 프로젝트 B에서도 사용 가능

								// 프로젝트 B의 main.scss
								@use "variables";  // 프로젝트 A의 변수 재사용

								.button {
								  background: variables.$color-primary;
								}

의존성 관리

파셜 파일을 사용하면 파일 간의 의존성을 명확하게 관리할 수 있습니다.

								// main.scss
								@use "variables";  // 변수 먼저 불러오기
								@use "mixins";     // 믹스인 (변수 사용 가능)
								@use "buttons";    // 버튼 (변수, 믹스인 사용 가능)

								// 의존성 순서가 명확함
								// variables → mixins → buttons

@import vs @use

파셜 파일을 불러오는 방법에는 @import와 @use가 있습니다.
각각의 차이와 사용법을 알아봅니다.

@import (구식 방법)

@import는 구식 방법이며, 여러 문제가 있습니다.

								// @import 사용 (구식)
								@import "variables";
								@import "mixins";

								.button {
								  background: $color-primary;  // 네임스페이스 없이 사용
								}

@import의 문제점:

전역 스코프: 모든 변수와 믹스인이 전역으로 노출됨
중복 로드: 같은 파일을 여러 번 불러올 수 있음
순서 의존성: 불러오는 순서가 중요함
네임스페이스 없음: 변수 이름 충돌 가능

@use (권장 방법)

@use는 현대적인 방법이며, 여러 장점이 있습니다.

								// @use 사용 (권장)
								@use "variables";
								@use "mixins";

								.button {
								  background: variables.$color-primary;  // 네임스페이스 사용
								}

@use의 장점:

네임스페이스: 변수 이름 충돌 방지
한 번만 로드: 같은 파일을 여러 번 불러와도 한 번만 로드
명확한 의존성: 파일 간 의존성이 명확함
순서 독립: 불러오는 순서가 중요하지 않음

@import vs @use 비교

두 방법의 차이를 표로 비교해봅니다.

구분
@import
@use

네임스페이스

없음 (전역)

있음 (파일명)
중복 로드

가능 (여러 번 로드)

불가능 (한 번만 로드)
순서 의존성

중요함

중요하지 않음
권장 여부

권장하지 않음

권장

현재는 @use를 사용하는 것을 권장합니다.

파셜 파일 구조 예시

실제 프로젝트에서 파셜 파일을 어떻게 구성하는지 예시를 살펴봅니다.

기본 파셜 파일 구조

작은 프로젝트에서 사용하는 기본 파셜 파일 구조입니다.

								// 프로젝트 구조
								scss/
								  ├─ _variables.scss    // 변수
								  ├─ _mixins.scss       // 믹스인
								  ├─ _buttons.scss      // 버튼
								  ├─ _cards.scss        // 카드
								  └─ main.scss          // 메인 파일

								/* main.scss */
								@use "variables";
								@use "mixins";
								@use "buttons";
								@use "cards";

카테고리별 파셜 구조

카테고리별로 파셜 파일을 구성하는 예시입니다.

								// 프로젝트 구조
								scss/
								  ├─ base/
								  │   ├─ _reset.scss
								  │   └─ _typography.scss
								  ├─ components/
								  │   ├─ _buttons.scss
								  │   ├─ _cards.scss
								  │   └─ _forms.scss
								  ├─ layout/
								  │   ├─ _header.scss
								  │   ├─ _footer.scss
								  │   └─ _grid.scss
								  ├─ _variables.scss
								  ├─ _mixins.scss
								  └─ main.scss

								/* main.scss */
								@use "variables";
								@use "mixins";
								@use "base/reset";
								@use "base/typography";
								@use "components/buttons";
								@use "components/cards";
								@use "layout/header";

정리

_partial.scss 개념에 대해 알아본 내용을 정리합니다.

파셜의 개념: 다른 파일에서 불러와 사용하는 파일, 언더스코어(_)로 시작
언더스코어의 의미: 컴파일되지 않고 다른 파일에서만 사용
파셜의 특징: 컴파일 안 됨, 재사용 목적, 모듈화, 네이밍 규칙
네이밍 규칙: 언더스코어로 시작, 불러올 때는 언더스코어 생략
파셜의 역할: 코드 모듈화, 재사용성 향상, 의존성 관리
@import vs @use: @use를 권장 (네임스페이스, 중복 방지, 명확한 의존성)
파일 구조: 기본 구조, 카테고리별 구조 예시

다음 페이지에서는 @use, @forward 기본 개념과 차이를 자세히 알아봅니다.