[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 44회차 미션

가져오기 (Import)

우리가 기존에 CSS를 학습할 때 특정한 CSS문서가 외부에 존재하는 또 다른 CSS문서를 가져올 때 @import라는 규칙을 사용했다. 이 것과 유사하게 Sass에서도 동일한 Import 규칙을 제공한다. 또, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다.

@import 로 외부에서 가져온 Sass 파일은 모두 단일 Css 출력 파일로 병합된다. 이 규칙은 CSS에서도 사용하는 규칙과 동일해서 혼동 될 수 있다.

 

기존 import 방식에는

@import url('경로'); 이런 방식으로 사용했다. Sass에서는 다른 파일을 가져올 때 @import "경로"; 를 사용한다.

이 가져오기가 CSS의 원래 명령으로 일으켜야할 수도 있다. 이렇게 바뀔 때 원래 CSS 그대로 동작하게 선언해야하는 경우가 있을 수 있다.

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

• 파일 확장자가 .css일 때

@import "hello.css";

• 파일 이름이 http:// 로 시작하는 경우

@import "http://hel.lo/hello";

• url() 이 붙었을 경우

@import url(hello);

• 미디어쿼리가 있는 경우

@import "hello" screen;

여러 파일 가져오기

하나의 @import로 여러 파일을 가져올 수도 있다.

파일 이름은 , 로 구분한다.

@import "header", "footer";

이것은 확장자가 .scss 나 .sass 가 붙어있을 것을 의 미한다. 기본적으로 sass 는 ;를 사용하지 않기 때문에 scss를 가져온다고 생각할 수 있다.

파일 분할(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 인 파일인 header와 side-menu를 가져온다

@import "header", "side-menu";

그리고 이 파일들을 css/ 디렉토리로 컴파일한다.

$node-sass scss --output css

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

Sass-App
// ...
|- scss
|  |- header.scss
|  |- side-menu.scss
|  |- main.scss
|- css
|  |- header.css
|  |- side-menu.css
|  |- main.css
//...

scss 폴더 내의 내용들이 css파일들로 분리되어 컴파일 된다. 이런 문제점을 방지하기 위해 main에 들어가는 header와 side-menu에 _를 붙이면

Sass-App
// ...
|- scss
|  |- _header.scss
|  |- _side-menu.scss
|  |- main.scss
//...

@import "header","side-menu";

이렇게 컴파일 했을 때

$node-sass scss --output css

결과

Sass-App
// ...
|- scss
|  |- _header.scss
|  |- _side-menu.scss
|  |- main.scss
|- css
|  |- main.css
//..

이런 header와 side-menu가 합쳐져서 컴파일 되는 것을 확인할 수 있다. _가 붙는경우 독립적인 파일로 컴파일 하지 않는다.

하지만 컴파일환경에따라 _를 붙이더라도 하나의 파일로 합쳐지지 않을 수도 있다.

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

정리하자면 _ 를 붙이는 개념에 대해 이해를 하고 쓰되 결과는 똑같지 않을 수 있다.

 

 

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스