【Sass】pxからvwへ自動で変換する

デザインデータがpxだけどvwで実装したい。
いちいち計算するの手間だな…。

この記事ではそんな疑問にお答えします。

この記事を読んでわかること
  • Sassを使ったpxからpwへ自動で変換する方法

vwへ変換する方法は色々ありますが、毎回計算するのは手間ですよね。

この記事では私が実際に使用しているvwへの変換方法をご紹介します。

この方法を使えば毎回vwへの変換を計算する手間が省け、ミスも減らせますよ。

この記事の著者

web制作エンジニア

伊藤 義尚

2021年よりweb制作の学習を開始し、現在1社と業務提携中

自身が学んだこと、ためになったことを発信しています

もくじ

pxからvwへ自動で変換する方法

早速ですが、コード(関数)はこちらです。

@function px_vw($num) {
  @return (1vw * $num / 750 * 100); // 基準値:750
}

関数の使い方なら知ってるよ、という方はこれをそのままコピペして使用下さい。

使い方

次に使い方の解説です。

Sassファイルにpx_vw関数を書きます。この関数は一度だけ書けばOKです。

使用する際は変換したいpx値を入力する場所にpx_vw(変換前のpx値)を入力します。

下の例ではfont-size: 16px;を変換する際の例を記載しています。

@function px_vw($num) {
  @return (1vw * $num / 750 * 100); // 基準値:750
}

p{
  font-size: px_vw(16);
}

出力結果

出力されたcssファイルを確認すると以下のように。

このように自動でvwに変換してくれました。

p {
  font-size: 2.1333333333vw;
}

まとめ

今回はSassを使ったvwへの自動変換の方法について解説しました。

一度使ってみると手計算には戻れなくなりますよ。

そしてSassは細かなカスタムが出来てとても便利ですね。

少しでも皆さんの参考になれば幸いです!

もくじ