Tutorials

Sass round() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The round() function in Sass is used to round a number to the nearest whole number. It's a useful tool for ensuring that calculations yield clean, integer values, which can be particularly important when dealing with layout dimensions, pixel-perfect designs, or any scenario where fractional numbers might cause issues.

💡 Syntax

The syntax for the round() function is simple, requiring only a single argument:

Syntax

Copied

round(number)

🔢 Parameters

number: A numerical value that you want to round. It can be a number with or without a unit (e.g., 10.5, 10.5px, 2.8em).

↩️ Return Value

The function returns the nearest whole number to the given input. If the fractional part is .5 or greater, it rounds up; otherwise, it rounds down.

📝 Example Usage

Let’s look at some examples to understand how the round() function works in different scenarios.

📜 Example 1: Rounding a Simple Number

example.scss

Copied

$number: 10.6;
$rounded-number: round($number);

body {
  font-size: $rounded-number * 1px;
}

In this example, 10.6 is rounded to 11, resulting in a font size of 11px for the body.

📜 Example 2: Rounding a Negative Number

example.scss

Copied

$number: -3.3;
$rounded-number: round($number);

h1 {
  margin-top: $rounded-number * 1rem;
}

Here, the number -3.3 is rounded to -3, which is then applied as the top margin for the h1 element.

📜 Example 3: Rounding with Units

example.scss

Copied

$number: 15.7px;
$rounded-number: round($number);

.container {
  padding: $rounded-number;
}

In this example, the round() function rounds 15.7px to 16px, which is then used for padding.

📜 Example 4: Using round() in Calculations

example.scss

Copied

$base-size: 8.25em;
$scale-factor: 1.618; // Golden ratio
$scaled-size: round($base-size * $scale-factor);

p {
  font-size: $scaled-size;
}

In this case, the calculated size is rounded to the nearest whole number to maintain a consistent, clean design.

🎉 Conclusion

The round() function in Sass is a handy utility for rounding numbers to the nearest whole number, making your styles more predictable and easier to manage. Whether you’re working with complex calculations or just want to ensure consistent pixel values, round() is a valuable function to have in your Sass toolkit.

By incorporating round() into your Sass projects, you can avoid unexpected fractional values, ensuring that your designs look as intended across different devices and browsers. Experiment with this function in your own projects to see how it can simplify your CSS and improve your layouts.