[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 기능을 사용할 필요 없이, 설정된 값에 따라 빌드됩니다. 하지만 되도록 _를 사용할 것을 권장합니다.



    본 포스팅은 HEROPY 님의 영상과 블로그를 보고 공부한 내용을 정리한 것입니다.
    https://heropy.blog/2018/01/31/sass/