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

패스트캠프 프론트앤드 인강 41일차 Sass(SCSS) 의 문자보간, import, 파일분리하는방법등을 알아보았다.

#{} (문자보간)

#{} 를 이용해서 코드의 어디든지 변수값을 넣을수 있다.

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

* 참고로 Sass의 내장함수 unquote()는 문자에서 따옴표를 제거한다.

 

가져오기(import)

css가 css를 가져올때 @import를 사용하는데 scss도 매우 비슷하다

또 Sass파일은 css처럼 import개념이되 단일 css출력 파일로 병합되는 것이 특징이다.(합쳐서 다시 내준다)

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen; //미디어쿼리가 있는 경우

여러파일가져오기

@import "header", "footer";

 

파일분할(Partials)

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

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

그래서 Sass는 파일분할(Partials)기능을 지원한다.

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

 

먼저 _를 붙이지 않고 컴파일시 어떻게되는지 살펴보자.

개별적으로 분리되어 컴파일들 되었음

이번에는 _를 붙이고 컴파일시 어떻게되는지 살펴보자.

단, 메인파일인 main.scss파일에는 _를 붙이지않도록한다.

이처럼 header와 side-menu.scss는 main.css파일로 하나로 합쳐져서 들어간것을 확인할수 있다.

즉 main.css에는 main.scss + side-manu.scss + header.scss가 컴파일되어 들어가있는 상태이다.

 

파일분할시에 문제가 한가지 있는데 webpack, parcel, gulp같은 일반적인 빌드툴에서는 partials기능을 사용할 필요없이 설정된 값에 따라 빌드된다. 그래서 _여부에 상관없는 결과가 도출될수도있다. 하지만 되도록 _를 붙이도록 권장된다.

 

https://bit.ly/31Cf1hp

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