WEBTODESIGN

VSCでSassのmax()とmin()がコンパイルエラーになる

VisualStudioCodeで、SCSSのmax()やmin()がコンパイルエラーになってコンパイルできなくなってしまう件。

2つの方法を見つけたので共有します。

方法① unquoteで囲む

maxやminで記述した部分を、「unquote(”)」で囲みます。

width: max(15vw, 87px);/* NG */
width: unquote('max(15vw, 87px)');/* OK */

方法② clampに置き換える

clampはエラーにならなかったので、maxやminをclampに置き換えてしまう方法です。

clamp(最小値, 推奨値, 最大値)はmax(最小値, min(推奨値, 最大値)) と同義です。

最小値がない場合は0pxにすればOKです。(最大値がない場合は100vwとでもしておけばいいでしょうか。スッキリはしませんが…。)

width: max(15vw, 87px);/* NG */
width: clamp(0px, 15vw, 87px);/* OK */

maxやminよりclampの方が、clampさえ覚えておけばいいしSCSSでもそのままいけるので、最近はclampしか使ってないです👐