Sassで小数点以下の値を扱う

Sassで小数点の切り上げ・切り下げや四捨五入をする方法をメモ。

サンプルコード

round()で四捨五入、ceil()で切り上げ、floor()で切り下げになります。

Sass

.round {
	width: round(33.33333%);
	height: round(66.66666%);
}
.ceil {
	width: ceil(33.33333%);
	height: ceil(66.66666%);
}
.floor {
	width: floor(33.33333%);
	height: floor(66.66666%);
}

コンパイルするとそれぞれ以下のように出力されます。

CSS

.round {
  width: 33%;
  height: 67%;
}

.ceil {
  width: 34%;
  height: 67%;
}

.floor {
  width: 33%;
  height: 66%;
}

計算で小数点が出た場合などに使うとよさそうです。
　

【参考サイト】

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