Tutorials

Sass floor() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 29 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The floor() function in Sass is a mathematical function that rounds a given number down to the nearest whole number. It is part of Sass’s suite of numeric functions and is particularly useful when working with calculations where you need to ensure that the result is a whole number without any decimal places.

This function can help prevent layout issues that may arise from fractional pixel values.

💡 Syntax

The syntax of the floor() function is simple and intuitive. It takes one argument:

Syntax

Copied

floor(number)

🔢 Parameters

number: The numeric value that you wish to round down to the nearest whole number.

↩️ Return Value

The function returns the largest integer less than or equal to the given number.

📝 Example Usage

Let’s explore some practical examples to see how the floor() function can be used effectively in Sass.

📜 Example 1: Rounding Down a Floating-Point Number

example.scss

Copied

$decimal-value: 10.75;
$rounded-value: floor($decimal-value);

.container {
  width: $rounded-value * 1rem; // 10rem
}

In this example, the floating-point number 10.75 is rounded down to 10, ensuring that the container width is a whole number of 10rem.

📜 Example 2: Using floor() in Calculations

example.scss

Copied

$base-width: 100px;
$scaling-factor: 1.2;
$new-width: floor($base-width * $scaling-factor);

.element {
  width: $new-width; // 120px (after floor())
}

Here, the multiplication of 100px by 1.2 results in 120px. Although in this case, the result is already an integer, using floor() ensures that any future changes to the scaling factor that result in a non-integer value will be rounded down.

📜 Example 3: Applying floor() in a Loop

example.scss

Copied

@for $i from 1 through 5 {
  .item-#{$i} {
    font-size: floor(1.8 * $i) * 1rem;
  }
}

This loop creates a series of classes with font sizes that increase by multiplying 1.8 by the loop index. The floor() function ensures that the font sizes are rounded down to the nearest whole number, avoiding fractional rem values.

🎉 Conclusion

The floor() function in Sass is a handy tool for ensuring that your numeric values are rounded down to the nearest whole number. This can be particularly useful when working with CSS properties that should not have fractional values, such as dimensions and pixel-based calculations. By using floor(), you can avoid potential rendering issues in your layouts and ensure consistent, predictable results in your stylesheets.

Whether you're dealing with responsive designs, dynamic calculations, or just need to clean up your numbers, floor() provides a simple and effective solution. Experiment with it in your Sass projects to see how it can streamline your design process.