핵심 Sass | @import

@import는 Sass에서 여러 개의 SCSS 파일을 하나의 스타일 시트로 합칠 때 사용하는 기능이다. CSS에서도 @import가 있지만, Sass의 @import는 빌드 타임에 파일을 병합하기 때문에 성능이 더 좋다.

---

기본 문법

@import "파일명";

• 확장자(.scss)는 생략 가능
• _(언더스코어)로 시작하는 파일은 컴파일 시 단독 CSS 파일로 변환되지 않음

예제

파일 분리

styles 폴더 구조

/styles
  ├── _variables.scss
  ├── _mixins.scss
  ├── main.scss

_variables.scss

$primary-color: #3498db;
$secondary-color: #2ecc71;

_mixins.scss

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

main.scss

@import "variables";
@import "mixins";

body {
  background-color: $primary-color;
}

.container {
  @include flex-center;
  height: 100vh;
}

---

@import의 문제점과 @use의 등장

Sass에서는 @import를 오래 사용했지만, 몇 가지 단점이 있어서 Sass v1.32.0부터 @use가 권장된다.

@import의 단점

1. 전역 네임스페이스 문제: 모든 변수, 믹스인, 함수가 전역(global)으로 선언됨 → 충돌 가능성 증가
2. 중복 로딩 문제: 동일한 파일이 여러 번 불러와질 수 있음 → 불필요한 코드 증가
3. 모듈화 부족: 파일 간 명확한 구분이 어렵고, 유지보수가 어려움

---

@import 대신 @use 사용하기

@use는 @import보다 더 좋은 방식!

@use "파일명";

• @use는 파일을 모듈화하여 사용
• 기본적으로 네임스페이스(namespace)를 적용 → 충돌 방지
• @use "파일명" as *;를 사용하면 네임스페이스 없이도 사용 가능

@import → @use 변경 예제

_variables.scss

$primary-color: #3498db;
$secondary-color: #2ecc71;

main.scss (기존 @import 방식)

@import "variables";

body {
  background-color: $primary-color; // 변수 직접 사용 가능 (전역)
}

main.scss (새로운 @use 방식)

@use "variables";

body {
  background-color: variables.$primary-color; // 네임스페이스 필요
}

main.scss (네임스페이스 없이 사용하고 싶다면?)

@use "variables" as *;

body {
  background-color: $primary-color; // @import처럼 사용 가능
}

---

@import와 @use 비교

비교 항목	@import	@use
네임스페이스	없음 (전역 변수 사용)	기본적으로 네임스페이스 적용
중복 로딩	동일한 파일이 여러 번 로드될 수 있음	한 번만 로드됨
모듈화	부족	강력한 모듈화 지원
최신 권장 여부	❌ 비권장 (Legacy)	✅ 권장 (Modern)

---

정리

• @import는 오래된 방식이며, 유지보수성이 떨어짐 ❌
• @use를 사용하면 네임스페이스로 충돌 방지하고, 모듈화 가능 ✅
• 새로운 프로젝트에서는 무조건 @use 사용하는 것이 좋음