CSSでのフォントサイズや余白の指定には、相対的な単位としてREM（root em）が広く使用されています。しかし、デザインを進める際にピクセル(px)単位で指定したいことも多いでしょう。そこで、Sass（SCSS）を使ってpxをREMに簡単に変換する方法を紹介します。
基本のフォントサイズを定義
まずは、HTMLの基本フォントサイズを変数として定義します。多くのブラウザでは、デフォルトで16pxが設定されています。
$base-font-size: 16px;pxをREMに変換するSass関数の作成
次に、ピクセル値をREMに変換する関数 px-to-rem を作成します。この関数は、入力されたピクセル値を基準にREM値を計算し返します。
@function px-to-rem($px) {
@return $px / $base-font-size * 1rem;
}関数を使用した具体例
実際にこの関数を使用してスタイルを定義する方法を見てみましょう。以下のコードでは、24pxのフォントサイズと16pxおよび32pxのパディングをREMに変換して使用しています。
.element {
font-size: px-to-rem(24px); // 24pxをREMに変換
padding: px-to-rem(16px) px-to-rem(32px); // 16pxと32pxをREMに変換
}まとめ
pxからREMへの変換を手動で行うのは手間がかかりますが、Sassの関数を使えば簡単に自動化できます。これにより、レスポンシブデザインの実装がスムーズになり、保守性の高いCSSを作成できます。ぜひこの方法を試してみてください。
