Sass @import 및 Partials

Sass는 CSS 코드를 건조하게 유지할 수 있습니다 (DRYDon't Repeat Yourself, 자신을 반복하지 마세요).

DRY 코드를 작성하는 방법 중 하나는 관련 코드를 별도의 파일에 저장하는 것입니다.

CSS 부분을 사용하여 작은 파일을 만들고 다른 Sass 파일에 포함할 수 있습니다. 예를 들어, 이런 파일은 다음과 같습니다: 리셋 파일, 변수, 색상, 글리프 등.

Sass 파일 가져오기

CSS와 마찬가지로 Sass도 @import 지시어.

@import 지시어는 파일의 내용을 다른 파일에 포함시키는 것을 허용합니다.

성능 문제로 인해 CSS @import 지시어는 큰 단점이 하나 있습니다; 매번 호출할 때마다 추가 HTTP 요청이 생성됩니다. 하지만 Sass @import 지시어는 파일을 CSS에 포함시키기 때문에 실행 시 추가 HTTP 호출이 필요하지 않습니다!

Sass 가져오기 문법:

@import filename;

훌륭한 조언:파일 확장자를 지정하지 않아도 됩니다. Sass는 자동으로 .sass 또는 .scss 파일을 가리키고 있습니다. 또한 CSS 파일을 가져올 수 있습니다.@import 지시어 파일을 가져오면, 주 파일에서 파일에 정의된 모든 변수나 mixin을 사용할 수 있습니다.

주 파일에 모든 파일을 가져올 수 있습니다:

예제

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

예를 들어, "reset.scss" 이름의 리셋 파일이 이렇게 보일 때를 생각해 보겠습니다:

SCSS 문법 (reset.scss):

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

지금 우리는 "reset.scss" 파일을 "standard.scss" 파일에 가져오려고 합니다.

우리는 이렇게 합니다: 일반적으로 파일 상단에 추가합니다. @import 지시어; 이렇게 하면 그 내용이 전역 효과 영역을 가질 것입니다:

SCSS 문법 (standard.scss):

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

따라서 "standard.css" 파일이 번역되면 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 파일을 직접 번역합니다. 그러나 파일을 가져오는 경우, 파일이 직접 번역되지 않도록 해야 합니다.

Sass에는 메커니즘이 있습니다: 파일 이름이 밑줄로 시작되면 Sass는 그 파일을 변환하지 않습니다. 이렇게 이름을 지은 파일은 Sass에서 partials라고 합니다.

따라서, 전두줄을 사용하는 partial Sass 파일은 이름을 사용합니다:

Sass Partial 문법:

_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;
}