概要
sassで「プレーンCSSのmin関数」を使う場合はクオートを使う。
「sassのmin関数」とは別物だと分からせろ。
min関数を使って幅のあるpaddingを設定したかったが…
プレーンcssの方のmin関数を使って
paddingを「表示幅の2%。ただし最大30px。」にしたかった。
具体的に言うと
幅 300pxの画面で見るとpadding: 6pxになる
幅 600pxの画面で見るとpadding: 12pxになる
幅1000pxの画面で見るとpadding: 20pxになる
幅1200pxの画面で見るとpadding: 24pxになる
幅1500pxの画面で見るとpadding: 30pxになる
幅1600pxの画面で見るとpadding: 30pxになる
幅2000pxの画面で見るとpadding: 30pxになる
とやりたかったので以下の記述
padding: min(2vw,30px);
が、
sassとプレーンcssでmin関数がかぶってしまったな…
「Error: Incompatible units: ‘px’ and ‘vw’.」と
コンパイルエラー発生。
「sassのmin関数は単位を揃えろ」と怒られた。
もちろん「プレーンcssのmin」は単位を揃える必要は無い。
調べた所、以下の内容を発見。
Sass: Special Functions
https://sass-lang.com/documentation/syntax/special-functions#min-and-max
以下、意訳。
- 従来のsassと新規のプレーンcssでmin関数の名前がかぶってしまった。うまく使い分けて欲しい。
- 該当部分を含むのが「css」ファイルであればエラーは起こらない
- Dart Sassの場合は変数や関数を使わなければプレーンcssのminとして解釈する
- クオートつけてunquoteする事で回避できる
先程の記述だと見分けがつかない。ということか。
クオート使って回避できた。
padding: unquote("min(2vw,30px)");
で解決。
padding: min(2vw,30px);
ちゃんととコンパイルされていた。
それならclamp()で良いのでは？
padding: clamp(6px,2vw,30px);
通常2vwで最小6px、最大30pxと設定できる。
こちらなら衝突は起きないのでそのまま使える。
…何をムキになっていたのでしょうね。
道理でどこ探しても話題になっていないわけだ。