@import "FILE_PATH/FILE_NAME.scss";
@import url(FILE_PATH//FILE_NAME.css);다른 스타일 파일을 가져올 때 사용한다.
기본적으로 sass 형태로 가져와 사용하나, 아래와 같은 상황에서는 css @import 규칙으로 컴파일 된다.
- 파일 확장자가 .css일 때
- 파일 이름이
http://로 시작하는 경우 @import url()로 가져오는 경우- 미디어쿼리가 있는 경우
@import "FILE_PATH/FILE_NAME";확장자가 없이 import 하는 경우 아래와 같은 파일명을 검색하여 import한다. 동시에 여러 파일이 존재할 경우 에러가 발생한다.
FILE_NAME.scssFILE_NAME.sass_FILE_NAME.scss_FILE_NAME.sass
파일 분할(Partials)
sass, scss 파일은 컴파일 시 css문법으로 변환하여 새로운 .css파일을 생성하는데 이는 variables, buttons 등 여러 style에서 공용으로 사용되는 스타일 파일이 많아질 경우 성능의 문제를 야기할 수 있다.
파일 분할은 스타일 파일 이름 앞에 _를 붙인 경우 .css파일로 컴파일하지 않도록 한다.
// main.scss
@import "buttons"위와 같이 import 한 경우 아래와 같은 구조로 컴파일된다.
├─css
│ ├─ buttons.css
│ └─ main.css
├─scss
│ ├─ button.scss
│ └─ main.scss파일 분할 기능을 사용한 경우에는 아래와 같은 구조로 컴파일 된다.
├─css
│ └─ main.css
├─scss
│ ├─ _button.scss
│ └─ main.scss📌 참조
frontend developer 📚