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

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


```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(")");
}

```

# 使い方
```scss
.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
こちらは作成者は私ではありません。  
多分[こちら](https://css-tricks.com/snippets/sass/strip-unit-function/)が大元なのだろうと思います。  
`strip-unit`で検索すると、いろんな方が同じ関数を掲載しています。  

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


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

[こちら](https://zenn.dev/tak_dcxi/articles/2cc1828e9c1fe2#px%E2%86%92vw%E3%81%AE%E8%A8%88%E7%AE%97)に載っているのが、大元のソースだと思います。
この記事はすばらしいと思います。（あまり理解できていないところもありますが...）

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

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

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

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

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

[こちら](https://zenn.dev/tak_dcxi/articles/2cc1828e9c1fe2#px%E2%86%92vw%E3%81%AE%E8%A8%88%E7%AE%97)の記事にも似たようなことが書いてあって、激しく同意しました。
pxメインでコーディングするか、vwメインでコーディングするかは、そのデザイン・案件次第で切り替わって、どちらが優れているというものではないですよね...  
そうですよね...

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

```scss
.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月ごろにリリースなので、そのときかな。。

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


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

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

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

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

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


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

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