[Sass/SCSS] 가져오기(Import)

Sass(SCSS) 가져오기(Import)

• @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다.

• 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다.

• Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다.

  • 파일 확장자가 .css일 때
  • 파일 이름이 http://로 시작하는 경우
  • url()이 붙었을 경우
  • 미디어쿼리가 있는 경우

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

여러 파일 가져오기

• 하나의 @import로 여러 파일을 가져올 수도 있습니다. 파일 이름은 ,로 구분합니다.

@import "header", "footer";

파일 분할(Partials)

• 프로젝트 규모가 커지면 파일들을 header나 side-menu 같이 각 기능과 부분으로 나눠 유지보수가 쉽도록 관리하게 됩니다.

• 이 경우 파일이 점점 많아지는데, 모든 파일이 컴파일 시 각각의 ~.css 파일로 나눠서 저장된다면 관리나 성능 차원에서 문제가 될 수 있습니다.

• 그래서 Sass는 Partials 기능을 지원합니다.

• 파일 이름 앞에 _를 붙여(_header.scss와 같이) @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않습니다.

• 예를 들어보겠습니다. 다음과 같이 scss/ 안에 3개의 Sass 파일이 있습니다.

    Sass-App
      # ...
      ├─scss
      │  ├─header.scss
      │  ├─side-menu.scss
      │  └─main.scss
      # ...

• main.scss로 나머지 ~.scss 파일을 가져옵니다.

// main.scss
@import "header", "side-menu";

• 그리고 이 파일들을 css/디렉토리로 컴파일합니다. (컴파일은 node-sass)

# `scss`디렉토리에 있는 파일들을 `css`디렉토리로 컴파일
$ node-sass scss --output css

• 컴파일 후 확인하면 아래와 같이 scss/에 있던 파일들이 css/ 안에 각 하나씩의 파일로 컴파일됩니다.

    Sass-App
      # ...
      ├─css
      │  ├─header.css
      │  ├─side-menu.css
      │  └─main.css
      ├─scss
      │  ├─header.scss
      │  ├─side-menu.scss
      │  └─main.scss
      # ...

• 이번에는 가져올 파일 이름에 _를 붙이겠습니다. 메인 파일인 main.scss에서는 _를 사용하지 않습니다.

    Sass-App
      # ...
      ├─scss
      │  ├─_header.scss
      │  ├─_side-menu.scss
      │  └─main.scss
      # ...

• 같은 방법으로 import 및 컴파일

// main.scss
@import "header", "side-menu";

$ node-sass scss --output css

• 별도의 파일로 컴파일되지 않고 사용됩니다.

    Sass-App
      # ...
      ├─css
      │  └─main.css  # main + header + side-menu
      ├─scss
      │  ├─header.scss
      │  ├─side-menu.scss
      │  └─main.scss
      # ...

• Webpack이나 Parcel, Gulp 같은 일반적인 빌드툴에서는 Partials 기능을 사용할 필요 없이, 설정된 값에 따라 빌드됩니다. 하지만 되도록 _를 사용할 것을 권장합니다.