いまのWebはレスポンシブ対応や色々なモニターサイズに対応できるような仕組みにするために、Web制作でコーディング中Sassを使用してCSSも設定しています。
CSSも過去に比べたらかなり便利なプロパティが増え、それに対し値も増えました。
便利な値のおかげで色々なモニターに合わせて表示できるよう柔軟に設定ができるようになっています。
そんな中、最小値と最大値を設定し、それまではブラウザの幅によってサイズが変化する設定をしました。プロパティはclampを使います。
clamp(最小値, 設定値, 最大値)
ブラウザ幅により可変はするもの、最大値、もしくは最小値に達した場合はそれぞれが適用されるというもの。
Sassを実行すると、そのclamp()を設定したところでエラーが発生しました。
Incompatible units: 'rem' and 'vw'.
どうやらremやvwは相対なため、実際の数値がなくエラーが起きてるとのことらしい。
確かに幅によって数値が変わるためにSass的にはちゃんと数値いれてということなんでしょう。
この回避策はあるのかな？と調べるとありました。
unquote('clamp(最小値, 設定値, 最大値)');
unquote関数で囲むと無事にSassの処理が通りました。
ひとつ面倒な作業が増えてしまいましたが、値の部分だけだし特にこればかりで設定しているわけじゃないのでひとまずはこれでエラー回避していこうと思います。