문법 - 가져오기, 여러 파일 가져오기, 파일 분할

1. 가져오기(Import)

@import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다.
또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다.

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

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

위의 경우 CSS @import 규칙대로 컴파일 된다.

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

 

 

2. 여러 파일 가져오기

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

@import "header", "footer";

cf. 뒤에 세미콜론이 있는거 보면 SASS가 아닌 SCSS를 들고 왔다는걸 알 수 있다.

 

 

 

3. 파일 분할(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
  # ...

아래처럼 별도의 파일로 컴파일되지 않고 사용된다.

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

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

 

 

--> 아직은 이러한경험이 없어서 무슨말인지 잘 이해를 못하겠다. 나중에 규모가 좀 있는 프로그램만들때 돌아와서 다시 보는걸로 하자.