자신의 컴포넌트에서 variables.scss 파일을 import 합니다.

// Button.module.scss
@use '@/styles' as *;

styles > _variables.scss, _mixins.scss 파일에서 폰트와 색상관련 글로벌 스타일 변수를 확인할 수 있습니다

image.png

폰트 굵기, 크기, 간격에 대한 Tokens과 색상에 대한 Tokens을 확인할 수 있습니다.

1. 개별 변수 사용

폰트의 경우 변수를 개별로 사용한다면 Tokens에 있는 변수를 사용하면 됩니다. (Tokens 스크린샷 아래 예시 적어놓았습니다)

image.png

image.png

@use '@/styles' as *;

// 변수 직접 사용 예시(특히 폰트 예시를 확인해주세요!)
.title {
  font-size: $font-size-3xl;
  font-weight: $font-weight-bold;
  line-height: $line-height-3xl;
  
  color: $color-gray-100;
  background-color: $color-primary-purple;
}

2. mixin 사용

폰트의 경우 mixin으로 사용할 수 있습니다

피그마 시안에서 Typography 를 확인합니다

Button의 text

Button의 text

image.png

pretendard/lg-16px-bold 에서 pretendard를 text로 바꾸고 px은 뺏다고 생각해주세요