SCSSでmax(値, calc(値 + 値))と書くとコンパイルエラーになる

Question

前提・実現したいこと

HTML、CSS等を使ってホームページ制作をしています。
(Visual Studio Codeを使用)

開発途中で、スタイルシートのコーディングをスマートにしたいと思い、SCSSを導入しました。
(VScode内の拡張機能: Live Sass Compilerを使用)

しかし、元々存在していたCSSをSCSSに置換したところ、コンパイルエラーが発生しました。

元のレスポンシブデザインを生かしたままSCSSを利用したいです。

発生している問題・エラーメッセージ

--------------------
Watching...
--------------------
Change Detected...
sample.scss
--------------------
Compilation Error
Error: "calc(2rem + ((1vw - 3.2px) * 2.375))" is not a number for `max'

(後略)

該当のソースコード

(前略)
#menu-trigger {
  position: relative;
  overflow: hidden;
  /* 32px @ 320px increasing to 70px @ 1920px */
  width: min(max(32px, calc(2rem + ((1vw - 3.2px) * 2.375))), 70px);
  /* 28px @ 320px increasing to 62px @ 1920px */
  height: min(max(28px, calc(1.75rem + ((1vw - 3.2px) * 2.125))), 62px);
  top: 25%;
  bottom: 0;
  margin-right: 0.3em;
}
(後略)

試したこと

width: min(max(32px, calc(2rem + ((1vw - 3.2px) * 2.375))), 70px);

レスポンシブデザインに対応すべく作成した、こちらの構文に対してエラーが発生していると考えました。
max関数からみて calc(2rem + ((1vw - 3.2px) * 2.375) が値でないからコンパイルが出来ないとエラー文は伝えていますが、この構文でCSSでは問題なく利用していました。

min(), max(), calc()に対して、SCSSでの別の記法が無いか、インターネット上の情報もあたりましたが見つけることが出来ず。
CSSからのSCSSへは互換性があるとネットにはあるため、非常に困っています。

補足情報（FW/ツールのバージョンなど）

VSCode のバージョンは1.45.1
Live Sass Compiler のバージョンは3.0.0

宜しくおねがいします。

Answer 1

この構文でCSSでは問題なく利用していました。

残念ながら、calc()の中にremやvwを使うと、その値は表示時にしか決まりません。

一方で、max()やmin()はコンパイル時に処理してしまうものなので、比較する値としてはコンパイル時に確定するものしか入れられません。

結果、max(calc( 1vw + 2px ), 300px)のようなものは処理不能となります。

メディアクエリやmax-width、min-widthを使うなどして、計算可能な形に書き換えるほかありません。

Comments

[tuxeha]

わかりやすい回答ありがとうございました。
この部分に関しては諦めて、可能な方法でアプローチしていこうと思います。