2021.02.19

Sass

mixinでfont-sizeとletter-spacingを設定

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;
}

関連記事

2024.08.02

Sass

ローカル変数をスタイルセットの外側で使用

通常Sassのローカル変数はスタイルセットの外側で使用することができません。セレクタ名の一部で変数を使用する場合、以下のように記述すると定義されていない変数を参…

2024.06.27

Sass

@contentを利用してmixinにスタイルセットを渡す

mixinの中で@contentを記述すると、呼び出し側から渡されたCSSの記述(スタイルセット)を@contentが書かれた場所で展開します。 以下はhove…

2025.07.05

Sass

mixinで@ifの条件分岐を利用して疑似要素を表示

mixinで@if(条件分岐)を利用して、疑似要素にグラデーションの点線ボーダーを表示します。mixinの設定は以下になります。 デフォルトの設定として要素の上…

2022.05.11

Sass

Sassの@import

CSSの@importは以下のいずれかを記述します。 style.cssからabout.cssを読み込んでいるので、htmlではstyle.cssのみ読み込みま…

2021.03.29

Sass

@at-rootによるルートへの書き出しと@keyframes

通常通りSassをコンパイルした場合、ネストされたルールセットをルートに書き出すことはできません。 コンパイル後のCSSは以下のようになります。 クラス名con…

上に戻る