htmlタグやbodyタグにfont-sizeの基準値を何も設定していない場合、1emを指定すると16pxで表示されます。20pxで表示したい場合は、20px ÷ 16pxで1.25emを指定します。
この計算は大変なので、まずhtmlタグにfont-size: 62.5%;を設定します。これで16px × 62.5% = 10pxになり、1emを指定すると10pxで表示されます。24pxで表示したい場合は2.4emを指定すればよいため、計算がわかりやすくなります。
html {
font-size: 62.5%;
}
次にsassのmixinを設定します。pxと、pxに相当するremの両方を書き出します。ポイントとして、基本的にはremを使うためremを後に書き出します。remが使えない時のフォールバックとしてpxも指定しますが、remが使えないケースはほぼないので、pxの書き出しはなくても問題ありません。
emではなくremを使うのは、emだと階層が下がった時に親要素のフォントサイズを基準にしてしまうからです。remであれば親要素のフォントサイズの影響は受けません。
@mixin fz($size: 24, $base: 16) {
font-size: $size + px;
font-size: ($size / ($base * .625)) + rem;
}
mixinの読み込みは、psdのpxで指定されている文字サイズをそのまま指定します。
.products-ttl {
@include fz(13);
}
書き出しの結果は以下のようになります。
.products-ttl {
font-size: 13px;
font-size: 1.3rem;
}
なおmixinの読み込みでフォントサイズを指定しない場合、mixinの第一引数で設定されている初期値の24が適用されます。
.products-ttl {
@include fz();
}
.products-ttl {
font-size: 24px;
font-size: 2.4rem;
}
mixinの読み込みで引数を省略する場合は、丸括弧を省略して記述しても同様の結果が得られます。
.products-ttl {
@include fz;
}
font-sizeと同様の仕組みでletter-spacingのmixinを設定します。
@mixin ls($size: 0, $base: 16) {
letter-spacing: $size + px;
letter-spacing: ($size / ($base * .625)) + rem;
}
letter-spacingで指定する数値の計算は、psdで設定されている文字のトラッキングの数値を1000で割ります。計算結果の単位はemです。例えばpsdのトラッキングの数値が100の場合、100 ÷ 1000 = 0.1emです。
.products-ttl {
@include ls(1);
}
.products-ttl {
letter-spacing: 1px;
letter-spacing: .1rem;
}





