数値の四捨五入、切り上げ・切り捨て、最大値・最小値の取得など、実用的な内容を紹介します。
関連記事の紹介
Scssでの算術の方法について知りたいという方は「Sass/SCSS入門講座 ３章 変数と演算の基本を理解する」で解説していますのでそちらをご確認下さい。
目次
数値の小数点以下を四捨五入：round関数
小数点以下を四捨五入するには、round()を使用します。
$var1: 1.234;
$var2: 2.345;
.element {
width: round($var1); // 1
height: round($var2); // 2
}数値の小数点以下を切り上げ：ceil関数
小数点以下を切り上げるには、ceil()を使用します。
$var1: 1.234;
$var2: 2.345;
.element {
width: ceil($var1); // 2
height: ceil($var2); // 3
}数値の小数点以下を切り捨て：floor関数
小数点以下を切り捨てるには、floor()を使用します。
$var1: 1.234;
$var2: 2.345;
.element {
width: floor($var1); // 1
height: floor($var2); // 2
}数値の絶対値を取得：abs関数
絶対値を取得するには、abs()を使用します。
$var1: -10;
$var2: 20;
.element {
width: abs($var1); // 10
height: abs($var2); // 20
}数値の最大値を取得：max関数
最大値を取得するには、max()を使用します。
$var1: 10;
$var2: 20;
$var3: 30;
.element {
width: max($var1, $var2, $var3); // 30
}指定された数値の中で最小値を返します：min関数
最小値を取得するには、min()を使用します。
$var1: 10;
$var2: 20;
$var3: 30;
.element {
width: min($var1, $var2, $var3); // 10
}数値をパーセンテージに変換する：percentage関数
数値をパーセンテージに変換するには、percentage()を使用します。
$var1: 0.25;
$var2: 0.5;
.element {
width: percentage($var1); // 25%
height: percentage($var2); // 50%
}ランダムな数値を取得する：random関数
ランダムな数値を取得するには、random()を使用します。
.element {
width: random(); // 0 ~ 1のランダムな数値が返される
}リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
まとめ
以下は、解説したScssの数値操作関数をまとめた表です。
| 関数 | 説明 | 例 |
|---|---|---|
round() | 指定した桁数で数値を四捨五入します。 | round(2.345)は2.35を返します。 |
ceil() | 指定した桁数で数値を切り上げます。 | ceil(2.345)は2.35を返します。 |
floor() | 指定した桁数で数値を切り捨てます。 | floor(2.345)は2.34を返します。 |
abs() | 数値の絶対値を返します。 | abs(-10)は10を返します。 |
max() | 指定された数値の中で最大値を返します。 | max(10, 20, 30)は30を返します。 |
min() | 指定された数値の中で最小値を返します。 | min(10, 20, 30)は10を返します。 |
percentage() | 数値をパーセンテージに変換します。 | percentage(0.5)は50%を返します。 |
random() | 0〜1の範囲でランダムな数値を返します。 | random()は0.1234のような値を返します。 |
これらの関数を活用することで、Scssで数値の操作を効率的かつ正確に行うことができます。
コメント