@import (가져오기)
@import로 외부에서 가져온 Sass 파일은 모두 새로운 단일 CSS 출력 파일로 병합됩니다. 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다.
CSS에서 다른 CSS파일을 로드하는 경우 @import url('경로'); 방식을 사용하는데 Sass에서는 @import "경로";처럼 사용하면 다른 SCSS 파일이나 다른 파일을 가져와서 병합하는 개념으로 import를 Sass내에서 활용할 수 있습니다.
Sass의 @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일이 되는 몇 가지 상황이 존재합니다.
import가 CSS 원래의 문법으로 해석되어야할 때도 있습니다. Sass는 컴파일되어 새로운 CSS파일로 바뀌는데 바뀔 때 원래 CSS 문법 그대로 동작하도록 선언해야 하는 부분에 다음과 같은 규칙으로 작성하면 컴파일될 때 원래 CSS 문법 그대로 동작됩니다. 즉, 병합되지 않고 컴파일되어 생성되는 CSS파일에 @import 문법으로 컴파일되도록 합니다.
- 파일 확장자가
.css일 때. Sass 문법으로 가져오지 않고 순수한 CSS 문법으로 파일을 가져오기 위해 파일 확장자를.css로 작성.
(기본적으로 SCSS에서는 기본적으로 파일 확장자가.scss로 정의됩니다)
@import "main.css;가 컴파일되면 @import url(main.css)로 컴파일됩니다.
- 파일 이름이
http://로 시작하는 경우
@import "http://hello.com/hello";가 컴파일되면 @import url(http://hello.com/hello);로 컴파일됩니다.
3.url( )을 사용하는 경우
@import url(main.css);가 컴파일되면 @import url(main.css);로 컴파일됩니다.
- 미디어쿼리가 있는 경우
@import "main" screen;이 컴파일되면 @import "main" screen;으로 컴파일됩니다.
@import가 개념 자체는 CSS와 동일하게 무언가를 가져오는 개념이지만 가져온 파일을 병합한다는 점에 차이가 있습니다. 파일을 합쳐서 새로운 파일을 다시 내보냅니다.
즉, SCSS에서의 @import와 CSS에서의 @import를 구분할 수 있어야 합니다.
여러 파일 가져오기
하나의 @import로 여러 파일을 가져올 수도 있습니다. 파일 이름은 콤마(,)로 구분합니다.
@import "header", "footer";
각 파일의 확장자가 기본적으로 .scss로 적용됩니다. 즉, SCSS파일을 가져옵니다.
파일 분할(Partials)
프로젝트의 규모가 커지면 파일들을 header나 footer 같이 각 기능과 부분으로 나누어 유지보수가 쉽도록 관리하게 됩니다. 이 경우 파일이 점점 많아지게되는데, 모든 파일이 컴파일 시 각각의 ~.css파일로 나눠서 저장된다면 관리나 성능 차원에서 문제가 될 수 있습니다 .그래서 Sass는 Paritals 기능을 지원합니다.
파일 이름 앞에 _를 붙여 @import로 가져오면 컴파일시 ~.css파일로 컴파일하지 않습니다.
만약 scss라는 폴더 안에 3개의 Sass 폴더가 존재한다고 하겠습니다.
Sass -> scss -> header.scss, side-menu.scss, main.scss
main.scss로 나머지 scss 파일을 가져옵니다.
// main.scss
@import "header", "side-menu";
,,,그리고 main.scss 파일을 css 폴더에 컴파일합니다. 컴파일 후 확인하면 아래와 같이 scss 폴더에 있던 파일들이 css 폴더 안에 각 각 하나씩 컴파일되어 css 파일이 생성된 것을 확인할 수 있습니다.
Sass -> scss -> header.scss, side-menu.scss, main.scss
css -> header.css, side-menu.css, main.css이번에는 가져올 파일 이름에 _를 붙여보겠습니다. 메인 파일인 main.scss 파일에서는 _를 사용하지 않습니다.
Sass -> scss -> _header.scss, _side-menu.scss, main.scss
css -> main.css // -> main = main + header + side-menu
위 그림처럼 별도의 파일로 컴파일되지 않습니다.
기본적으로 Sass에서는 _를 붙이면 독립적인 파일로 컴파일하지 않습니다.
Webpack이나 Parcel, Gulp 같은 일반적인 빌드툴에서는 Partials 기능을 사용할 필요 없이, 설정된 값에 따라 빌드됩니다. 즉, _을 붙이더라도 컴파일될 수도 있고 안될 수도 있습니다. 하지만 되도록 _를 사용할 것을 권장합니다.
