【Sass】小数点以下を切り上げ・切り捨てる方法

Sass（Syntactically Awesome Style Sheets）は、CSSの拡張機能として広く利用されています。その中でも、数値の操作に関する関数は非常に便利です。今回は、Sassで小数点以下を切り上げたり切り捨てたりする方法について紹介します。

小数点以下を切り上げる方法

Sassには、小数点以下を切り上げるための ceil 関数があります。これを使用することで、任意の小数を次の整数に切り上げることができます。

$number: 3.2;
$result: ceil($number); // $result は 4 になります

このように、ceil 関数を使うと簡単に小数点以下を切り上げることができます。

小数点以下を切り捨てる方法

同様に、Sassには小数点以下を切り捨てるための floor 関数も用意されています。これにより、小数点以下を切り捨てて最も近い整数を取得できます。

$number: 3.8;
$result: floor($number); // $result は 3 になります

floor 関数を使用すると、小数点以下を手軽に切り捨てることができます。

実践的な例

実際にプロジェクトで ceil や floor を使う場面を想定して、具体的な例を見てみましょう。

@mixin example-mixin($value) {
  $rounded-up: ceil($value);
  $rounded-down: floor($value);
  
  .rounded-up {
    content: "切り上げ: #{$rounded-up}";
  }
  
  .rounded-down {
    content: "切り捨て: #{$rounded-down}";
  }
}

@include example-mixin(5.7);

このコードでは、.rounded-up クラスには「切り上げ: 6」、.rounded-down クラスには「切り捨て: 5」という内容が含まれます。

まとめ

Sassの ceil 関数と floor 関数を使うことで、小数点以下の切り上げや切り捨てを簡単に行うことができます。これらの関数を活用して、スタイルシートのロジックをより柔軟かつ効率的に作成しましょう。