rem

by kazu69

HTML

<ul>
<li class='font-size12'>フォントサイズ 12px</li>
<li class='font-size14'>フォントサイズ 14px</li>
<li class='font-size16'>フォントサイズ 16px</li>
</ul>
<hr>
<ul>
<li style='font-size:12px'>フォントサイズ 12px</li>
<li style='font-size:14px'>フォントサイズ 14px</li>
<li style='font-size:16px'>フォントサイズ 16px</li>
</ul>

SCSS

html {
  font-size: 62.5%;
}

@mixin font-size($sizeValue: 1.3){
  font-size: ($sizeValue * 10) + px; // rem未対応ブラウザのfallback
  font-size: $sizeValue + rem;
}
.font-size12 {
@include font-size(1.2);
}
.font-size14 {
@include font-size(1.4);
}
.font-size16 {
@include font-size(1.6);
}