---

Partial 파일

• Partial 파일은 스타일 코드를 분리하여 유지보수성과 모듈화를 향상시킬 수 있음.
• 변수, 믹스인, 함수, 플레이스홀더 등과 같은 스타일 요소를 정의.
• _(underscore)로 시작하는 이름을 가지며, .scss 확장자를 가짐.
• _(underscore)로 시작하는 이유?
  • Partial(부분) 파일을 나타내는 관례이기도 하며,
  • SCSS 컴파일러에서 Partial파일로 취급 되어 개별적으로 컴파일되지 않음. (개별적으로 컴파일되는 독립적인 파일이 아님)
  • 즉, @import 된 다른 파일에 포함되어 컴파일 됨.
  • 런타임 시점에서 추가적으로 HTTP 요청하는 CSS와는 차이점을 가짐.
  • CSS의 @import 는 페이지 속도에 영향을 줄 수 있음.
• @import 로 여러 파일을 불러올 수 있음. (, 로 구분)

@import '_mixin.scss', '_style.scss';

변수와 mixin

• 변수를 담아 사용.

// _utilities.scss

$기본배경: #000000;
$제목글씨: #f5f5f7;
$본문글씨: #a1a1a6;
$로고배경: #87cbb9;
$로고글씨채우기: #7deddd;
$로고글씨채우기2: #57afdf;
$로고글씨윤곽선: #31334b;

• @mixin 에 미디어 쿼리를 담아 사용. (반응형)

// _utilities.scss

// 홈 분기점
$home-desktop: 1600px;
$home-tablet: 1200px;
$home-mobile: 767px;
// 1600px 이하
@mixin home-desktop {
  @media (max-width: $home-desktop) {
    @content;
  }
}
// 1200px 이하
@mixin home-tablet {
  @media (max-width: $home-tablet) {
    @content;
  }
}
// 767px 이하
@mixin home-mobile {
  @media (max-width: $home-mobile) {
    @content;
  }
}

// Header.scss

@import '_utilities.scss';

.header__global-navigation--contents-wrapper {
      display: flex;
      a + a {
        margin-left: 90px;
        @include header-mobile {
          margin-left: 0px;
        }
      }
      & > a {
        color: $본문글씨;
        letter-spacing: 1px;
        text-align: center;
        font-size: 12px;
        width: 70px;
        @include header-mobile {
          width: 1px;
        }
        &:hover {
          color: $제목글씨;
        }
      }
    }

---