この画面幅以上のときはこのpxで、それ以下のときはvwになるscssの関数

いや、タイトルからして何言ってんだコイツ...といった感じですが、とりあえずscssのコード載せます。
（sassとscssの違いもよく分かってない奴ですみません...）

@function strip-unit($number) {
    @if type-of($number) == 'number' and not unitless($number) {
      @return $number / ($number * 0 + 1);
    }
    @return $number;
}

//pxをvwに変換
@function _vw($px, $width: 1366) {
    @return (strip-unit($px) / strip-unit($width)) * 100vw;
}

//vwと最大pxを返す
@function _min($px, $width: 1366) 
{
    $vw: _vw($px, $width);
    @return unquote("min(") + $vw + unquote(",") + $px + unquote(")");
}

使い方

.sample {
    font-size: _min(16px);
    margin-top: _min(30px);
}

/* 画面幅800pxを基準にしたい（レスポンシブ） */
.sample {
    font-size: _min(16px, 800);
    margin-top: _min(30px, 800);
}

/* 画面幅375pxを基準にしたい（レスポンシブ） */
.sample {
    font-size: _min(16px, 375);
    margin-top: _min(30px, 375);
}

デザインはだいたいpxでいただくと思うので、そのままpxで入れます。

関数の説明

strip-unit

こちらは作成者は私ではありません。
多分こちらが大元なのだろうと思います。
strip-unitで検索すると、いろんな方が同じ関数を掲載しています。

なにをしているかというと、scssは違う単位では計算できないので、単位を省いて計算してくれるんだと思います。たぶん。

_vw

こちらも作成者は私ではありません。
他の会社の人から引き継いだら、この関数を発見しました。
要するにpxを引数として入力したら、画面幅をもとにvwに変換してくれます。

こちらに載っているのが、大元のソースだと思います。
この記事はすばらしいと思います。（あまり理解できていないところもありますが...）

私は今まで、いちいち手動で計算していたので、これは良い関数だと思いました。
けど、難点もあるのでちょっと考えた結果、自作関数できました。

1366pxなんですが、こちらはXDのデフォルトが1366pxだからなんですかね？いいと思います。

_min

私、作りました。（ばーん!!）

_vw関数でももちろんいいのですが、vwメインでやると、画面幅が1500px以上になったときに、フォントサイズ、marginなど大きくなりすぎるのです。
もちろん、ファーストビューや画面いっぱいに広げるデザインのときは、それでOKだと思います。

が、しかし、
中央幅1100pxとか1000pxに収まった部分のデザインをコーディングするときは、その中央幅を広げてしまうとワイドモニターのとき可読性下がるよね。と思います。

こちらの記事にも似たようなことが書いてあって、激しく同意しました。
pxメインでコーディングするか、vwメインでコーディングするかは、そのデザイン・案件次第で切り替わって、どちらが優れているというものではないですよね...
そうですよね...

要するになにがしたいかというと、この例で言えば、

.sample {
    font-size: _min(16px);
}

/* 画面幅800pxを基準にしたい（レスポンシブ） */
.sample {
    font-size: _min(16px, 800);
}

/* 画面幅375pxを基準にしたい（レスポンシブ） */
.sample {
    font-size: _min(16px, 375);
}

1366px以上のときは、フォントサイズは16pxまでしか大きくならないよ。
逆に1366px以下のときは、vwで計算するわよ。
だから、1100pxとか1000pxとか中途半端な画面幅のときもある程度対応できるわよ。
を想定して作りました。

ただ、今から実案件で使ってみるので、うまくいくかどうかはまた報告したいと思います。
11月ごろにリリースなので、そのときかな。。

2022-10-26追記
今、実案件で使っていますが、画面幅1000pxまではこの書き方で耐えうるかなと思います。
それ以下の画面幅であれば、結局px指定がいいのか...??まだ迷走中です。
今日、誰かがいいねしてくれたので、俄然やる気出て追記しました。あざます!!

ついでにブレークポイントについて

数年前までは、あまり端末の数も多くなかったので、ブレークポイントも少なかったと思いますが、今はもうなにを基準にしていいか分からないくらい、端末の種類が増えましたね。

私はPCからコーディングして、だんだん画面幅を狭くしていく派です。（というか、そっちに慣れてしまっている感あります）

@mixin MQ-MAX($canvas) {
    @media only screen and (max-width: $canvas) { @content; }
}

あ、これは会社の人がくれた関数です。（その人は辞めてしまいましたが...）
引数にpxを入れると、この画面幅以下のときに効くスタイルを記述できます。

私は特定のブレークポイントは設けておらず、画面幅狭めていって、あ、ここで崩れる思ったら、そのセクションに対してブレークポイント決めたりしています。
（ただ、どのくらい丁寧にやるかは気分にもよります）

最後に

今、こういう記事書いていますが、数年後(?)にはまた変わっているんでしょうね。
というか、コーディング自体は早く自動化してほしいなーというのが本音。
XDがつよつよになって、そのままwebサイトのhtmlとcssを出力してくれればなぁと思います。

だいたいXDでデザインもらうことが増えましたが、たまにイラレでもらってしまって、ああああああとなるときあります。はい。