フォントの上下余白を考慮したマージンを出すmixin
PhotoshopやXDのデザインデータでコーディングする時、
例えばテキストボックスを選択して、そのテキストボックスと下のコンテンツのマージンを参照すると、行送りを抜いたサイズを参照するので、参照した余白通りに指定してもコーディング側の余白が大きくなります。（Photoshopはweb以外もあるので仕方ないとは思いますが、XDは流石に対応して欲しい・・ちなみに Figmaはそこらへん対応してくれている。ありがたいです🥰 ）
計算が面倒なので、SCSSでフォントのline-heightを考慮して上下の余白を簡単に実装できるmixinを作りました。line-heightの計算も手軽に取得できる関数も一緒に作っています。
line-heightの計算
line-heightの計算は下記で取得できます。
行送りの数値（px）÷ フォントサイズ（px） = 行送り数値これをSCSSの@function で関数にします。
//line-heightの計算
@function line-height($fontSize: 16, $lineHeight: 24) {
@return calc($lineHeight / $fontSize);
}
//下記のように使う
.demo {
$line-height: line-height(18, 36);
line-height: $line-height; // line-height: 2; が出力
}フォント余白の計算
フォントの余白は下記で取得できます。
{( フォントサイズ（px）x フォントのline-height ) - フォントサイズ（px）} / 2 = 文字の上余白または下余白(px)これを @mixinにします。
// フォントの余白を合わせたマージンを作成（上下の余白）
// $positon = margin-topやpadding-bottomなど
// $fontSize = font-size 数値を入れる
// $lineHeight = line-height 整数か少数で指定する
// $px = 開けたい距離。数値をいれる
//初期値ありで呼びだしたいときのメモ
// @include font-margin($positon: "margin-top", $px: 20);
@mixin font-margin($positon, $fontSize: 16, $lineHeight: 2, $px) {
$margin_1: calc((($fontSize * $lineHeight) - $fontSize) / 2);
$result_margin: $px - $margin_1;
#{$positon}: $result_margin + px;
}
//下記のように使う
.demo {
$line-height: line-height(18, 36);
line-height: $line-height; // line-height: 2;が出力
//さきほど作った$line-height関数も一緒に使えます。
@include font-margin("margin-bottom", 18, $line-height, 40);
}
