2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

SCSSの数学関数内でremを使いたいがコンパイルエラーに苦しむ人へ

Posted at

みんな大好き冒頭結論

結論、calc()で数学関数を囲う!以上!解散!

calc(clamp(1.75rem, -0.8614rem + 5.4475vw, 2.625rem));

原因

SCSSでclampやmin,maxなどの数学関数を用いる際、min(1rem,1vw)clamp(1.75rem, -0.8614rem + 5.4475vw, 2.625rem)等、数学関数内で相対的単位を用いた場合、コンパイルエラーが発生する。

そもそもなぜコンパイルエラーになるのか

scssはサーバー上でコンパイルされるため、vwやremなどの相対的な単位は計算できません。そのため、異なる単位を混ぜて数学関数に指定すると、互換性のない単位というエラーが発生します。

解決方法

calc関数で数学関数を囲うことで、サーバー上でコンパイルさせずに、ブラウザ上で処理を行うことになります。結果コンパイルエラーは発生しないことになります。

余談

余談になりますがModern fluid typography editorを用いることで簡単に流動的なfont-sizeを書けることができるのでぜひご活用ください。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?