Sassで計算する時は丸め込みを忘れずに

goto_jp 840views 更新:2014年3月24日

といったタイトルに反して自分も結構丸め込みを忘れがちですが…

例えば下記のような例だと、widthの値が小数点以下になるのが明確です(161.8px)

$size: 100px;
$goldretio: 1.618;
.box {
    height: $size;
    width: $size * $goldretio;
}

そこで下記のように round() を使います。

.box {
    height: $size;
    width: round($size * $goldretio);
}

他言語にある round 関数と同じで、小数点以下を四捨五入して丸め込みを行ってくれます。
この場合は width:162px と返ってきます。

ほか下記2点の丸め込み関数があります。

.box {
    width: ceil($size * $goldretio); //width: 162px
}

ceilは小数点以下を切り上げます。
※四捨五入ではなく切り上げなので、0.1でも1とします。

.box {
    width: floor($size * $goldretio); //width: 161px
}

floor は小数点以下を切り下げます。
※四捨五入ではなく切り下げなので、0.9でも0とします。

Sassで数値計算する時は「とりあえず」でroundをかけても良いかもしれません。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません