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

関連記事

2022.07.13

Sass

@extendのプレースホルダーセレクタを利用

@extend専用のプレースホルダーセレクタは「%セレクタ名」のように記述します。@extendのプレースホルダーセレクタはCSSとして生成されません。 以下の…

2021.01.26

Sass

インターポレーションの利用

インターポレーションは変数が参照できない場所でも使うことができるようにする機能です。通常Sassの変数はプロパティ値から参照して使用します。この場合インターポレ…

2021.01.27

Sass

プロパティに変数でマイナス値を設定

プロパティに変数でマイナス値を設定するケースです。例えばマイナスmarginを設定する場合、値が単独の場合は以下のように記述すれば問題ありません。 ですがプロパ…

2020.09.30

Sass

Koalaで発生したコンパイルエラーの対処法

Koalaで発生したコンパイルエラーの対処法です。発生したエラーはログから確認できますが、Koalaの起動を終了するとエラーログは消去されます。 Argumen…

2025.07.05

Sass

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

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

上に戻る