Sassでpxをrem、vw、%に変換 関数メモ

コーディング依頼が来た際にデザインデータではpxになていることがほとんどです。
コーディングをする際に可能な限り相対値を使用したいと思い、Sassを活用して、ピクセル単位をremやvw、%などに簡単に変換できる便利な方法をメモしました。

基本設定

$base-width: 1920px; // vw計算用の基本幅
$base-font-size: 16px; // rem計算用の基本フォントサイズ

pxをremに変換

Sassでピクセルをremに変換する関数。
基本フォントサイズ（$base-font-size）を基にして、ピクセル値をremに変換。

@function rem($pixel) {
  @return math.div($pixel, $base-font-size) * 1rem;
}
// 例）font-size: rem(20px);

math.divを使う理由としては、Sassの新しいバージョンでは「/」での除算が推奨されなくなったから。将来的なエラーを防ぐためにmath.divを使っている。

例えば、font-size: rem(20px)と書くと、1.25remが出力される。

pxをvwに変換

pxをvwに変換する関数です。レスポンシブデザインでよく使われるvw単位で、動的にサイズを指定できます。

@function vw($pixelsVw) {
  @return math.div($pixelsVw, $base-width) * 100vw;
}
// 例）font-size: vw(20px);

vwでサイズを指定するのに便利。例えば、vw(20px)と書くと、画面幅に応じたサイズが計算される。

pxを%に変換する関数

pxを%に変換する関数も作成できます。特に要素の幅や高さをパーセンテージで指定したいときに便利です。

@function percent($pixels-percent) {
  @return math.div($pixels-percent, $base-width) * 100%;
}
// 例）max-width: percent(960px);

例えば、max-width: percent(960px)と記述すれば、CSSで自動的に50%と出力されます。

おまけ

フォントサイズと行間の比率を計算するための関数。

@function lh($num: 16, $line: 24) {
  @return math.div($line, $num);
}
// 例）line-height: lh(フォントのサイズ, デザインツール);

これで、例えばlh(16, 24)と書けば、line-heightが1.5になる。

ポイントとしては、新しいSassの仕様に合わせて/の代わりにmath.divを使っていること。

View all articles