sassでmin関数使おうとしてIncompatible unitsエラーが出た場合はクオートで回避する

概要

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と設定できる。
こちらなら衝突は起きないのでそのまま使える。

…何をムキになっていたのでしょうね。
道理でどこ探しても話題になっていないわけだ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です