Sass @import 및 Partials 

Sass는 CSS 코드를 DRY (Do not Repeat Yourself)로 유지합니다.

DRY 코드를 작성하는 한 가지 방법은 관련 코드를 별도의 파일에 보관하는 것입니다.

CSS 스니펫이 있는 작은 파일을 만들어 다른 Sass 파일에 포함 할 수 있습니다. 이러한 파일의 예로는 초기화 파일, 변수, 색상, 글꼴, 글꼴 크기 등을들 수 있습니다.

Sass 파일 가져 오기(Import) 

CSS와 마찬가지로 Sass는 @import 지시어도 지원합니다.

@import 지시어를 사용하면 한 파일의 내용을 다른 파일에 포함시킬 수 있습니다.

CSS @import 지시어는 성능 문제로 인해 큰 단점이 있습니다. 호출 할 때마다 추가 HTTP 요청을 작성합니다.

그러나 Sass @import 지시문은 CSS에 파일을 포함합니다. 따라서 런타임시 추가 HTTP 호출이 필요하지 않습니다!

Sass Import Syntax: 

@import filename; 

** 파일 확장자를 지정할 필요가 없습니다. Sass는 자동으로 .sass 또는 .scss 파일을 의미한다고 가정합니다.

** CSS 파일을 가져올 수도 있습니다. 

** @import 지시어는 파일을 가져오고 가져온 파일에 정의 된 모든 변수 또는 믹스인을 주 파일에서 사용할 수 있습니다.

주 파일에서 필요한 만큼 파일을 가져올 수 있습니다.

@import "variables";
@import "colors";
@import "reset";

예를 들어 "reset.scss"라는 재설정 파일이 있다고 가정합니다. 다음과 같습니다.

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

이제 "reset.scss"파일을 "standard.scss"라는 다른 파일로 가져 오려고 합니다.

방법은 다음과 같습니다. @import 지시어를 파일의 맨 위에 추가하는 것은 정상입니다. 

이 방식으로 콘텐츠의 전역 범위가 지정됩니다.

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

따라서 "standard.css"파일이 변환되면 CSS는 다음과 같이 보입니다.

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass 분할 (Partials)

기본적으로 Sass는 모든 .scss 파일을 직접 변환합니다. 그러나 파일을 가져 오려는 경우(import) 파일을 직접 변환 할 필요가 없습니다.

Sass는 이것을 위한 메커니즘을 가지고 있습니다 : 밑줄이 있는(_) 파일 이름을 시작하면 Sass는 파일을 변환하지 않습니다.

이 방법으로 명명 된 파일은 Sass에서 partials라고 불립니다.

따라서 분할된 Sass 파일의 이름은 앞에 밑줄이 붙습니다.

Sass Partial Syntax: 

_filename; 

다음 예제는 "_colors.scss"라는 분할 Sass 파일을 보여줍니다. (이 파일은 "colors.css"로 직접 변환되지 않습니다.)

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

이제 분할 파일을 가져 오는 경우 밑줄을 생략하십시오. Sass는 "_colors.scss"파일을 가져와야 함을 이해합니다.

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}