[북팡] SCSS 타이포그래피 , 컬러팔레트 생성

타이포 그래피 변수 설정

자간은 reset 파일에 포함시켜도 되지만 한글폰트에만 적용해야 해서 타이포그래피에 포함시켰다

굵기는 따로 객체로 만들어주고 각 폰트명에 맞춰 사이즈와 행간을 묶어줬다

// 자간(한글 폰트만 적용할것)
$letter-spacing: -0.025rem;

$font-weights: (
  font-bold: 700,
  font-medium: 500,
  font-regular: 400,
);

// pc 폰트
$pc-font: (
  title-1: (
    font-size: 2rem,
    line-height: 2.625rem,
  ),
  body-1: (
    font-size: 1rem,
    line-height: 1.5rem,
  ),
  button-1: (
    font-size: 1rem,
    line-height: 1.5rem,
  ),
);

// 모바일 폰트
$mobile-font: (
  title-1: (
    font-size: 1.5rem,
    line-height: 2.125rem,
  ),
  body-1: (
    font-size: 0.9375rem,
    line-height: 1.375rem,
  ),
  button-1: (
    font-size: 1rem,
    line-height: 1.5rem,
);

 

컬러팔레트

// 컬러 팔레트
$color-palette: (
  brand-main-color: #fce15c,
  brand-sub-color-1: #9f5cfa,
  brand-sub-color-2: #f59917,
  bg-light-color: #f7f7fb,
  bg-regular-color: #f1f1f5,
);

 

Mixin

// 폰트 믹스인
@mixin font-styles(
  $font-map,
  $font-key,
  $font-weight: font-medium,
  $letter-spacing: $letter-spacing
) {
  font-size: map-get(map-get($font-map, $font-key), font-size);
  line-height: map-get(map-get($font-map, $font-key), line-height);
  font-weight: map-get($font-weights, $font-weight);
  letter-spacing: $letter-spacing;
}

 

폰트 설정 인자

• $font-map: 폰트 설정 정보를 담고 있는 map (PC/모바일 구분 포함).
• $font-key: 폰트명을 식별하는 키.
• $font-weight: 폰트 굵기, 기본값은 font-medium.
• $letter-spacing: 자간 설정, 선택적(기본값 $letter-spacing).

폰트 속성 처리

• font-size: $font-map에서 $font-key를 기준으로 가져온다
• line-height: $font-map에서 동일하게 가져온다
• font-weight: $font-weights에서 $font-weight 값을 기준으로 매칭.
• letter-spacing: 인자로 전달받은 값을 사용한다

 

// 컬러팔레트 믹스인
@function get-color($color) {
  @return map-get($color-palette, $color) or black;
}

@mixin color-styles($color) {
  background-color: get-color($color);
  border-color: get-color($color);
  color: get-color($color);
}

 

 

get-color 함수

• 인자로 받은 $color 값을 기반으로 컬러 팔레트($color-palette)에서 색상을 찾음
• 기본값으로 black 반환

color-styles 믹스인

• $color 값을 받아서 배경, 테두리, 텍스트 색을 설정한다

 

사용방법

  @import "./../../common/variables";
  
    &-links {
      @include font-styles($font-map: $pc-font, $font-key: body-3);
      color: get-color(font-03-gray);
    }