Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Numeric

Sass round() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 11 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass round() Function

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
Copy To Clipboard
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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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
Copy To Clipboard
$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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy