typography

.my-component {
  margin: em(10px) em(5px);
}

// 出力
.my-component {
  margin: 0.625em 0.3125em;
}

.my-component {
  margin: rem(10px) rem(5px);
}

// 出力
.my-component {
  margin: 0.625rem 0.3125rem;
}

.my-component {
  margin: px(3rem);
}

// 出力
.my-component {
  margin: 48px;
}

$main_navigation: type-style(
   $font-size: rem(14px),
   $font-weight: 600,
   $letter-spacing: rem(.1px),
   $line-height: rem(14px),
   $text-transform: none,
);

// type-style() mixin を使用して、type-style() 関数から生成された新しいタイプ スタイルを使用します。
.main-nav {
  @include type-style($main_navigation);
}

// 最初に使用するタイプ スタイルを定義します
$my-body-1: type-style(
   $font-size: rem(14px),
);

// タイプ スタイル マップを使用して、既存のマップの 1 つをオーバーライドします。
$type-scale: type-scale(
  ...
  $body-1: $my-body-1,
  ...
);

$h1-type-scale: type-scale-category($type-scale, 'h1');

.fancy-h1 {
   @include type-style('h1');

   color: mediumvioletred;
}

$h1-style: type-scale-category($type-scale, 'h1');
@include type-style-vars('h1', $h1-style);

.ig-typography {
  @include type-style-elements();
}

.ig-typography {
  @include type-style-classes();
}

$h1-style: type-scale-category($type-scale, 'h1');
@include font-var('h1-font', $h1-style);

@include typography('Roboto', $my-type-scale);