CSS の比較関数【min】【max】【clamp】はSASS では使えないのか？

Question

###１．実現したいこと

CSS で記述できる【min】【max】【clamp】をSASS でも使いたい

###２．発生している問題

CSS の比較関数として以下の３つがあります。

• min
• max
• clamp

これらを、SASS 内で以下のように記述するとエラーがでてしまいうまくCSS にコンパイルされません。

###３．該当のソースコード

font-size: clamp(20px, (1rem + 3vw), 28px);

###４．補足情報

そもそも、これらの比較関数はSASS 内で使えないのでしょうか？

もし、このようにすれば問題なくコンパイルされるなどのアドバイスをいただければありがたいです。

Comments

[m.ts10806]

＞エラーがでてしまい
https://teratail.com/help/question-tips#questionTips3-4-2

あと、コード一部では判断できません。
全体が分かるもの、もしくは現象再現できる最小構成のコードを改めて作って提示してください。

Answer 1

Max及びMinはSASSで使用する場合はクオートで囲む必要があります。

参考
[https://doudemo.info/plane-css-min_and_sass-min-functions_are_different/](sassでmin関数使おうとしてIncompatible unitsエラーが出た場合はクオートで回避する)

上記clampの例ですと計算部分の単位が違うためにうまく計算できていないようです。
calcを追加して

  font-size: clamp(20px, calc(10px + 3vw), 28px);

にしてみてください。

Comments

[createwebsite22]

ありがとうございます。
アドバイスしていただいたように書き換えました。
その結果、SASS ➜ CSS にコンパイルすることができました。

そして、ブラウザ上の表示も問題なく反映しました。

clamp を解説しているサイトやYouTube では、calc なしで直接記述していたのですが、SASSの場合は必要なのですかね？

今後、いろいろ模索してみます。
参考にになりました。
ありがとうございます。

[gogoweb_ikeda]

>clamp を解説しているサイトやYouTube では、calc なしで直接記述していたのですが、SASSの場合は必要なのですかね？

cssではcalcなしで計算はできません。
sassではcalcではなく通常の計算式の場合はコンパイル時点で計算されます。
そのためremとvwでは計算結果が一意の値にならないのでコンパイル時エラーがでます。