pxをvwに変換する関数

この記事を読むのに必要な時間は約 2 分です。

@function px-to-vw($size, $viewport: 1440) {
  $rate: math.div(100, $viewport);
  @return $rate * $size * 1vw;
}
@function px-to-vw-sp($size, $viewport: 375) {
  $rate: math.div(100, $viewport);
  @return $rate * $size * 1vw;
}

使用方法としては、以下のように使用する

.breadcrumb {
    width: min(800px, common.px-to-vw(800));

    @media screen and (max-width: 846px) {
        width: calc(100% - common.px-to-vw-sp(40));
    }
}

大前提として、以下のファイルを読み込んでいる必要があります。

@use "sass:math";