SASS / @import로 다른 파일 가져오기

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

문법

예를 들어

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

CSS 파일 가져오기

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

SCSS

CSS

SCSS 파일 가져오기

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

inc.scss

SCSS

CSS

확장자 없이 가져오기

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

예를 들어

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

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

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

변수와 Mixin

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

inc.scss

SCSS

CSS