Sass(Scss)의 기능 - import

📌 Sass(Scss)의 import 기능

원하는 scss 파일을 따로 분리해서 외부 파일로 만든 다음, 불러오기(import)를 할 수 있는 기능이다.

 

🛠️ 사용방법

1. 분리하고 싶은 scss파일 생성

scss폴더 안에 "새 파일"을 생성하고, 파일명 앞에 언더바(_)를 넣어서 scss파일을 만든 후 내용을 작성하면 된다.

폴더명 앞에 붙은 언더바(_)가 부분파일 형식이라는 뜻

_reset.scss파일 생성

예: reset이라는 css를 따로 분리하고 싶다. -> "_reset.scss" 라는 폴더 생성한다.

 

2. 불러 올 파일에 @import "불러올 파일명"; 입력

style.scss에 _reset.scss파일을 불러오고 싶으면 @import "reset"; 라고 입력하면 된다.

이 때 언더바(_)나 확장자명(.scss)를 따로 붙이지 않아도 된다.

@import 구문

확인

컴파일을 하면 _reset.scss라는 파일이 style.scss라는 파일과 합쳐져서 하나의 css로 만들어진 것을 볼 수 있다. ✌️

하나의 css로 컴파일되어진 모습