SASS / @import로 다른 파일 가져오기
CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다.
문법
@import "path/filename";
예를 들어
@import "inc/abc.scss";
는 inc 폴더 안의 abc.scss 파일을 가져옵니다.
CSS 파일 가져오기
CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다.
SCSS
@import "inc.css";
CSS
@import url(inc.css);
SCSS 파일 가져오기
SCSS 파일을 가져오면 그 파일의 내용이 현재 파일에 추가됩니다.
inc.scss
h1 { margin: 30px 0px; }
SCSS
@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
SCSS 파일을 가져왔다면, 가져온 파일에 있는 변수와 Mixin을 사용할 수 있습니다.
inc.scss
$jb-color: red;
SCSS
@import "inc.scss"; h1 { color: $jb-color; }
CSS
h1 { color: red; }