前提

普段やっているサイト制作では、PCはコンテンツ幅の上限ありでそれを下回ったら縮小、SPは横幅に合わせて拡縮というパターンが多いです。

より昔のサイトだとPCは完全固定幅で横スクロールが出ても良かったり、
デザイン重視のサイトだと画面幅によってすべて拡縮だったり、
色々なパターンがありますが、SPはフォントサイズも合わせて拡縮するものが多い印象です。

今回はデザインを見て横幅を計算するのにいつも使ってるもののご紹介です。

コード

stylus - 定義

vw(design_px)
  return "calc((100vw / 375 ) * %s)" %(design_px)

stylus - 使い方

.hoge
  width vw(100)

sass - 定義

@function vw($px) {
  @return calc((100vw / 375) * $px);
}

sass - 使い方

.hoge {
  width: vw(100);
}

内容

stylusのコードをベースに説明します。

return "calc((100vw / 375 ) * %s)" %(design_px)

これは calc((100vw / デザイン幅) * 要素の幅) です。
横幅375pxのデザイン上で、横幅100pxの場合 width vw(100) とします。
横幅だけでなく、 height vw(500) や margin vw(10) vw(20) などもいけます。

横幅750pxのデザインならば

return "calc((100vw / 750 ) * %s)" %(design_px)

とします。

デザイン幅も変数化しておきたい場合は

design_width = 375 // 変数定義

vw(design_px)
  return "calc((100vw / %s ) * %s )" %(design_width design_px) // ここで使用

とします。
calc内に変数使いたいときの記法がクセ強めですね。

StylusとSassではmixinの作り方が違うものの、書いてあることは同じです。

補足

直接関係はありませんが、vwはスクロールバーの幅を含んでしまうので、横幅指定でvwと%を混在させるとスクロールバーの有無で想定とズレることがあります。
なので変に混在させないことと、個人的にはなるべく%で指定すると良いと思います（vwを紹介しておいてなんですが）。

おわり

自作mixinをめちゃ活用されてる方を見るとスゴッと思いますが、自分でやると後から見返したときに訳分かんなくなりがちなのでたくさんは使わないことが多いです。
これは常に使ってて、あとはブレイクポイントくらいかもです。
最近JSばっかであんまりスタイルガチャガチャしてないんですよね・・たまにはやりたいです。

👋