HTML/CSS

【作業効率爆上がり】font-sizeをpx→rem、line-heightをpx→数値に変換する@mixin

 

Hello World🌍

以下はXDのキャプチャですが、このようにテキストのline-heightはpxで設定されていますね。

XDの例

そのままpx指定でCSSに記述することもできますが、font-sizeが変化した時のことを考えると、やっぱり数値で指定したいですよね。

だけど、34÷20 = 1.7！と計算して入力するのはまあま面倒臭い…😅

それも今日でさよなら✋

今回は実務で重宝すること間違いなし！
font-sizeをpx→rem、line-heightをpx→数値に変換する@mixinをご紹介します。

Contents
  1. サンプル
  2. 解説
  3. おわりに

サンプル

See the Pen Auto Calculate Font-Size & Line-Height by POSIPAN (@posipan) on CodePen.

解説

font-size, line-heightのpxを指定して、それぞれrem, 数値に変換する@mixinです。

// font-sizeをpx→remに変換するためのオリジナル関数
@function rem($fs) {
  @return ($fs / 10) + rem; // 16pxの場合 16/10 = 1.6(rem)となる
}

// font-size, line-heightをpx指定で、それぞれrem/数値に変換する@mixin
@mixin font($fs, $lh) {
  font-size: rem($fs); // 先程のオリジナル関数を使用している
  line-height: $lh / $fs; // line-height値が数値で出力される
}

html {
  font-size: 62.5%;
}

font-sizeはremで出力しますので、計算がしやすいように、
html要素に対してfont-size: 62.5%または10pxを指定します。

remはhtml要素で指定したfont-sizeをベースに値が決まるので1.6remは16pxと同じ値になります。

SCSS（トランスパイル前）

@function rem($fs) {
  @return ($fs / 10) + rem;
}

@mixin font($fs, $lh) {
  font-size: rem($fs);
  line-height: $lh / $fs;
}

html {
  font-size: 62.5%;
}

p {
  // 定義した@mixinを呼び出している
  // font-size: 32px, line-height: 48pxの場合
  @include font(32, 48);
  text-align: center;
}

@includeで先程定義した@mixinを呼び出しています。
font-size: 32px; line-height: 48px;の例です。

@include font(32, 48);

CSS（トランスパイル後）

以下のようにfont-size, line-heightがそれぞれrem, 数値の形式に変換されました！
もう煩わしい計算とはおさらばです✋

html {
  font-size: 62.5%;
}

p {
  font-size: 3.2rem;
  line-height: 1.5;
  text-align: center;
}

おわりに

line-heightの計算は数値によっては小数点以下がいっぱいになるため、計算だけでなく、入力もかなり面倒です。

今回のように@functionや@mixinといったSassの機能をふんだんに使うと作業効率が爆上がりします！

ではまた🤘

関連記事