Sass random() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 90 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The random() function in Sass is a handy tool that generates a random number. This function can be particularly useful in situations where you need a dynamic and unpredictable value, such as randomly assigning colors, sizes, or other properties in your stylesheets.

The random() function adds an element of randomness, allowing you to create more varied and interesting designs.

💡 Syntax

The syntax of the random() function is simple. It can be used with or without an argument:

Syntax

Copied

random()           // Returns a random integer between 1 and the specified upper limit.
random($limit)     // Returns a random integer between 1 and $limit (inclusive).

🔢 Parameters

$limit(optional): An integer specifying the upper limit of the random number range. If omitted, the function returns a random integer between 1 and 1, which essentially means it will always return 1.

↩️ Return Value

The function returns a random integer between 1 and the specified limit (inclusive).

📝 Example Usage

Let's explore some examples to see how the random() function can be used effectively in Sass.

📜 Example 1: Generating a Random Number

example.scss

Copied

$random-number: random(100); // Generates a random number between 1 and 100.

p {
  font-size: $random-number + px;
}

In this example, a random number between 1 and 100 is generated and used to set the font size of a paragraph element. This can create a different font size each time the stylesheet is compiled.

📜 Example 2: Random Color Selection

example.scss

Copied

$colors: (
  red,
  green,
  blue,
  yellow,
  purple
);

$random-color: nth($colors, random(length($colors)));

div {
  background-color: $random-color;
}

This example demonstrates how to randomly select a color from a predefined list of colors using the random() function. Each time the stylesheet is compiled, the div will have a different background color.

📜 Example 3: Creating Random Margin Values

example.scss

Copied

$random-margin: random(50); // Generates a random margin value between 1 and 50.

.box {
  margin-top: $random-margin + px;
  margin-right: $random-margin + px;
  margin-bottom: $random-margin + px;
  margin-left: $random-margin + px;
}

In this example, the random() function generates a margin value between 1 and 50 pixels, which is applied to all sides of the .box element. This can create a dynamic layout where the margin varies each time the stylesheet is compiled.

📜 Example 4: Random Border Radius

example.scss

Copied

$random-radius: random(100); // Generates a random border-radius value between 1 and 100.

.button {
  border-radius: $random-radius + px;
}

This example shows how to create buttons with randomly generated border-radius values, leading to different rounding effects on each button.

🎉 Conclusion

The random() function in Sass is a powerful tool for introducing variability and unpredictability into your stylesheets. Whether you're looking to assign random colors, sizes, or other properties, random() provides a simple way to achieve this. By incorporating randomness into your designs, you can create more dynamic and engaging user experiences.

Experiment with different upper limits and see how the random() function can bring a fresh and unique touch to your projects. Understanding and using this function effectively can help you create stylesheets that are not only functional but also visually interesting.