percentage()で小数点以下を切り捨てる指定方法【Sass】

  • 投稿日:
  • by
  • カテゴリ:

percentage()でだされた値の小数点以下を切り捨てる方法です。単純に考えれば当たり前のことなのですが、なぜか情報が少ないのでメモ代わりとして。

Sassのpercentage()を使ったときに、数値によって小数点まで表示されることがあります。小数点以下を切り捨てすてたくて色々やってみました。

値を変数に置き換える?

小数点以下を切り捨てるには、floor()を使えばよいわけなのですが、この引数をどのように指定すればよいかを深く考えてしまいました。(なぜこのようなことをしたのか意味不明で本当に時間の無駄でした。)

$value : percentage(18px/14px);

#foo {
	font-size: floor($value);
}

※:上記のコードは間違いなので、良い子は真似しないでください。

当然ながらエラーが起こる。関数でだされる値を変数に置き換えることができない。

関数ごとすればいいんだよ。

よくJavaScriptを書く場合に、変数に置き換えてから引数の値にしていたものでしたから、その脳が大きく憚りました。以下のように素直にやれば小数点以下を切り捨てることができます。

#foo {
	font-size: floor(percentage(18px/14px));
}