@import

SCSS(SASS)에서도 @import 구문을 사용할 수 있습니다. SCSS에서 파일을 import할 경우 기본적으로 SCSS(SASS) 파일로 가져오게 됩니다.

파일을 import 하게 되면 해당 파일의 내용이 현재 파일에 추가되는 효과를 가져옵니다.

/* title.scss */
h1 {
  color: blue;
}

@import "title.scss";

p {
  font-size: 15px;
  color: green;
}

컴파일 결과

h1 {
  color: blue;
}
p {
  font-size: 15px;
  color: green;
}

만약, import 과정에서 확장자를 생략하면 네 가지 파일이름으로 검색합니다. title.scss, title.sass, _title.scss, _title.sass

비교해서 네 개중 하나만 존재하면 해당 파일을 import하고 여러개가 검색된다면 오류를 발생시킵니다.

---

import한 파일의 변수도 사용이 가능하다

SCSS(SASS) 파일을 import 했다면 import한 파일 내에서 선언된 변수 혹은 추후에 소개드릴 Mixin도 사용할 수 있습니다.

/* title.scss */
$blue-color: blue;

h1 {
  color: $blue-color;
}

@import "title.scss";

p {
  font-size: 15px;
  color: #blue-color;
}

컴파일 결과

h1 {
  color: blue;
}
p {
  font-size: 15px;
  color: blue;
}

---

CSS 파일로 import 되는 경우

몇 가지 예외사항으로 CSS 파일 형식으로 import 되게 할 수 있습니다. 이 경우 위와 같은 변수 사용이 불가능하니 주의해주세요.

• .css 확장자 파일을 import할 때
• @import 뒤에 url()이 올 때
• 파일 이름이 http://로 시작할 때
• 미디어 쿼리가 존재할 때

/* 아래의 경우 모두 CSS 파일로 import가 이루어지는 예외 사항입니다. */
@import "title.css";
@import "http://style.com//title";
@import "url(title)";
@import "title" screen;