Sass percentage() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 46 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The percentage() function in Sass is used to convert a unitless number into a percentage. This function is particularly useful when working with fractional numbers in calculations where percentages are required, such as in responsive design, layouts, or animations.

By converting numbers to percentages, you can maintain consistency and clarity in your stylesheets.

💡 Syntax

The syntax of the percentage() function is straightforward. It takes one argument:

Syntax

Copied

percentage(number)

🔢 Parameters

number: The unitless value that you wish to convert into a percentage.

↩️ Return Value

The function returns a percentage value based on the input number.

📝 Example Usage

Let's explore some practical examples to see how the percentage() function can be used.

📜 Example 1: Basic Conversion

example.scss

Copied

$ratio: 0.5;
$percentage: percentage($ratio);

.progress-bar {
  width: $percentage;
}

In this example, the number 0.5 is converted to 50%. The resulting percentage is then used as the width of a progress bar.

📜 Example 2: Using in Calculations

example.scss

Copied

$base-width: 200px;
$ratio: 0.75;
$calculated-width: $base-width * percentage($ratio);

.container {
  width: $calculated-width;
}

Here, the percentage() function converts 0.75 into 75%, and this percentage is used in a calculation to determine the width of a container.

📜 Example 3: Converting Fractional Numbers

example.scss

Copied

$golden-ratio: 1.618;
$golden-percentage: percentage(1 / $golden-ratio);

.golden-section {
  width: $golden-percentage;
}

This example demonstrates the conversion of a fractional number into a percentage using the percentage() function, which is then applied to a CSS property.

🎉 Conclusion

The percentage() function in Sass is an essential utility for converting unitless numbers into percentages. It is particularly useful in scenarios where percentages are more meaningful or required, such as in responsive design or precise layout calculations.

By utilizing percentage(), you can streamline your Sass workflows and improve the readability of your code. This function simplifies the process of converting and applying percentages, making your stylesheets more efficient and easier to maintain.

Mastering the percentage() function will enhance your ability to handle numerical values in Sass, giving you greater control over your designs and layouts. Experiment with different use cases to see how this function can be applied in your projects.