SCSS mixin으로 font 및 반응형 레이아웃 정의하기

0. TL;DR

• Font
  
  • 성능을 위해 woff2, subset font 사용. 지원 안할 경우를 대비 woff는 fallback font로 설정
  • mixin을 사용해 classname으로 간단히 font 사용 가능하도록

• Layout
  
  • 모든 iPhone 사이즈에 대응가능하도록 media query로 계산
  • mixin을 사용해 레이아웃 요소가 일관적인 사이즈 유지하도록

---

1. Why?

• 현재 iPhone용 App에 들어갈 Webview page 제작 중
• mixin을 사용해서 팀이 사용할 Font와 Layout을 설정해보자

---

2. Font

• 빠르게 Font를 설정할 수 있도록, 용량이 가장 작은 woff2 사용
• woff를 지원하지 않을 경우를 대비해 woff를 fallback font로 설정
• 또한 기본 font 대비 1/3가량인 subset font 사용

@mixin font-style($weight, $size, $line-height) {
  font-family: 'Pretendard', sans-serif;
  font-weight: $weight;
  font-size: $size * 1rem;
  letter-spacing: -3%;
  line-height: $line-height;

  @font-face {
    font-family: 'Pretendard';
    src: url('/assets/font/pretendard-#{$weight}-subset.woff2') format('woff2'),
         url('/assets/font/pretendard-#{$weight}-subset.woff') format('woff');
    font-weight: $weight;
    font-style: normal;
  }
}

.h1bold { @include font-style(bold, 1.5, 130%); }
// 이 외 지정 폰트들...

• mixin을 사용해서 font마다 다른 3가지(weight, size, line-height)를 입력받고 각각의 class를 정의
• 설정된 font classname을 간단하게 사용할 수 있도록 선언

---

3. Layout

@mixin responsive-dimensions($default-width, $default-height) {
  width: $default-width;
  height: $default-height;

  @media (min-height: 1px) and (max-height: 480px) {
    // iPhone 3, 4S
    width: $default-width * 0.95;
    height: $default-height * 0.95;
  }
  @media (min-height: 481px) and (max-height: 568px) {
    // iPhone 5, SE 1
    width: $default-width;
    height: $default-height;
  }
// 이 외 아이폰 사이즈들...

• iPhone용 App이니 모든 iPhone 사이즈에 대응할 수 있도록 media query로 계산해줌
• 아래와 같이 사용하면 간편하게 계산된 사이즈 적용 가능

//_index.scss
@forward 'colors.scss';
@forward 'fonts.scss';
@forward 'responsive.scss';

// 사용할파일.scss
@use '경로/_index.scss' as *;

.button {
  @include responsive-dimensions(48px, 24px);
}

---

4. 래퍼런스

https://blog.banksalad.com/tech/font-preload-on-safari/

지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions | 뱅크샐러드

https://velog.io/@sammy1101/CSS-SCSS%EC%99%80-styled-component%EC%9D%98-mixin-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%86%8C%EA%B0%9C

[CSS] SCSS와 styled-component의 mixin 그리고 사용법