Sass @import

Sass @import and Partials

Sass는 CSS 코드를 DRY(Don't Repeat Yourself, 중복배제) 상태로 유지합니다.
DRY(중복배제) 코드를 작성하는 한 가지 방법은 관련 코드를 별도의 파일에 보관하는 것입니다.

CSS 스니펫으로 작은 파일을 만들어, 다른 Sass 파일에 포함할 수 있습니다.
이런 파일에는 reset file, 변수, 색상, 글꼴, 글꼴 크기 등이 있습니다.

CSS와 마찬가지로 Sass는 @import 지시문(directive)도 지원합니다.

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

CSS ''@import'' 지시문은 성능 문제로 인해 큰 단점이 있습니다; 호출할 때 마다 추가 HTTP 요청을 생성합니다.
그러나 Sass ''@import'' 지시문은 CSS에 파일을 포함합니다; 따라서 런타임에 추가 HTTP 호출이 필요하지 않습니다!

@import filename;

Tip:
파일 확장자를 지정할 필요가 없습니다. Sass는 자동으로 .sass 또는 .scss 파일을 의미한다고 가정합니다.
CSS 파일을 가져올 수도 있습니다. @import 지시문은 파일을 임포트하고,
임포트한 파일에서 정의된 모든 변수 또는 믹스인(mixins)을 기본 파일(the main file)에서 사용할 수 있습니다.

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

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

예를 들어 보겠습니다: 아래와 같은 “reset.scss”이라는 reset파일이 있다고 가정해 보겠습니다.

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는 모든 .scss 파일들을 직접 트랜스파일화 합니다.
그러나, 어떤 파일을 임포트하려는 경우, 파일을 직접 트랜스파일화 할 필요는 없습니다.

Sass에는 이에 대한 메커니즘이 있습니다. 파일 이름을 밑줄(underscore)로 시작하면
Sass는 해당 파일을 트랜스파일화 하지 않습니다. 이런 식으로 이름이 지정된 파일을 Sass에서는 partials라고 합니다.

따라서 partial Sass 파일의 이름은 선행 밑줄(leading underscore)로 지정됩니다.(ex, _globals.scss)

_filename;

아래 예제에서 "_colors.scss"라는 이름의 partial Sass 파일을 보여줍니다.
(이 파일은 "colors.css"로 즉시 트랜스파일되지 않습니다):

"_colors.scss":

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

이제 partial 파일을 임포트하는 경우, 밑줄을 생략하십시오. Sass는 "_colors.scss"파일을 가져와야 한다는 것을 이해합니다.

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