[sass/scss] 다른 scss 불러오기

안녕하세요. 플입니다.

오늘은 scss에서 다른 파일을 불러와보겠습니다.

 

---

 1.  불러올 파일 만들기 

먼저 불러올 파일을 만듭니다.

불러올 것이 아무것도 없으면 안되겠죠?

 

불러올 파일의 이름은 되도록 메인으로 사용할 scss와 이름이 겹치지 않게 해주시고

가장 앞에 _(언더바)를 입력해줍니다.

 

_이름.scss

위의 형식처럼 적어주세요.

가장 앞에 언더바를 적으면 이 파일은 컴파일되지않고 나중에 컴파일은 메인으로 사용하는 파일에 한꺼번에 됩니다.

 

이건 _base.scss의 내용입니다.

 

 

하지만 컴파일은 main.css에 같이 되는 것을 알 수 있습니다.

이게 한꺼번에 컴파일되는 경우입니다.

 

이렇게 관리를 하면 수정은 편하면서 용량은 가볍게 관리가 가능합니다.

 

---

 2.  메인 파일에 불러오기

불러올 파일을 만들었다면 이제 메인으로 사용할 scss에 불러옵니다.

 

불러오는 것은 @import를 이용해 불러옵니다.

@import '_base';

import는 수입하다 말고도 불러오다라는 뜻이 있습니다.

말 그대로 파일을 불러올 때 사용합니다.

 

@import 뒤에는 ''(작은 따옴표)를 이용해 불러올 파일을 이름만 적어줍니다.

이때 다른 확장자는 불러올 수 없으니 주의해주어야합니다.

 

 

---

그럼 이만.

총총.