Main menu

SASS 강좌 | @import로 다른 파일 가져오기

CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다.

문법

SASS에서 @import의 문법은 다음과 같습니다.

@import "path/filename";

예를 들어

@import "inc/abc.scss";

는 inc 폴더 안의 abc.scss 파일을 가져옵니다.

CSS 파일 가져오기

CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다.

SASS

@import "inc.css";

CSS

@import url(inc.css);

SASS 파일 가져오기

SASS 파일을 가져오면 그 파일의 내용이 현재 파일에 추가됩니다.

inc.scss

h1 { margin: 30px 0px; }

SASS

@import "inc.scss";
p { font-size: 12px; }

CSS

h1 {
  margin: 30px 0px;
}
p {
  font-size: 12px
}

확장자 없이 가져오기

확장자 없이 파일 이름만으로 가져오기를 하면 네 가지 파일이 있는지 검색하여 가져옵니다.

예를 들어

@import "inc";

는 다음 파일이 있는지 검색합니다.

  • inc.scss
  • inc.sass
  • _inc.scss
  • _inc.sass

네 개 중 하나만 존재하면 그 파일을 가져오고, 여러 파일이 존재하면 변환 시 에러가 납니다.

변수와 Mixin

SASS 파일을 가져왔다면, 가져온 파일에 있는 변수와 Mixin을 사용할 수 있습니다.

inc.scss

$jb-color: red;

SASS

@import "inc.scss";
h1 { color: $jb-color; }

CSS

h1 {
  color: red;
}

이 글을 공유하기

Kakao