[SCSS] font size mixin class 믹스인으로 폰트 사이즈, 커스텀폰트 클래시스 만들기

폰트 관련 믹스인도 만들어두면 유용하게 쓸 수 있다.
한글폰트, 영문폰트를 각각 설정하는것은 다른파트에서 기록.

@mixin

/* 10부터 i 까지 폰트 사이즈 만들기 */
/* i값은 0.1, 0.2, 0.3 rem씩 증가 */
/* 기본 html font-size를 10으로 고정 */

html {
  font-size: 10px;
}

@mixin font-classes {
  @for $i from 10 through $max-font {
    $value: $i * 0.1rem !important;
    .font#{$i} {
      font-size: $value;
    }
  }
}
@include font-classes;


/* 타입을 받아서 폰트 세팅을 결정 */
@mixin font($type: "title") {
  @if ($type== "title") {
    font-size:4.8rem;
    font-family: "Noto Sans KR", sans-serif;
    color:#000;
    line-height:140%;
    word-break: break-word;
    font-weight:700;
  }
  @if ($type== "semi-title") {
    font-size: 1.4rem;
    font-family: "Roboto", sans-serif;
    color:#E0E0E0;
    line-height:150%;
    word-break: break-all;
    font-weight:500;
  }
}

 

사용법

<p class="font14">안녕하세요</p>

.user-page > h2{
	@include font("semi-title");
}