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)을 기본 파일에서 사용할 수 있습니다.

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

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

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

SCSS Syntax (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;
}