Sass unique-id() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The unique-id() function in Sass is a utility that generates a unique identifier string. This function is particularly useful when you need to ensure that certain elements, classes, or IDs in your CSS have unique values, avoiding conflicts within your stylesheets. It can be leveraged in scenarios such as dynamically creating component-specific styles or when working with a large number of elements that require unique identifiers.

💡 Syntax

The syntax for the unique-id() function is simple, as it does not take any parameters:

Syntax

Copied

unique-id()

No Parameters: The function is invoked without any arguments.

🔢 Parameters

The unique-id() function does not require any parameters. It generates a unique string each time it is called, ensuring that the returned value is different with each invocation.

↩️ Return Value

The function returns a unique string that can be used as an identifier in your CSS.

📝 Example Usage

Let’s explore some examples to understand how unique-id() can be used effectively in your Sass projects.

📜 Example 1: Generating Unique IDs for CSS Classes

example.scss

Copied

$button-id: unique-id();
$card-id: unique-id();

.button-#{$button-id} {
  background-color: #007bff;
  color: #fff;
}

.card-#{$card-id} {
  border: 1px solid #007bff;
  padding: 1rem;
}

In this example, the unique-id() function is used to generate unique class names for a button and a card. Each class will have a distinct identifier, ensuring there are no conflicts with other elements on the page.

📜 Example 2: Creating Unique IDs in a Loop

example.scss

Copied

@for $i from 1 through 3 {
  $id: unique-id();

  .list-item-#{$id} {
    content: "Item #{$i}";
    padding: 10px;
    border: 1px solid #ccc;
  }
}

Here, unique-id() is used within a loop to create unique class names for list items. This ensures that each list item has a unique style definition.

📜 Example 3: Applying Unique IDs to HTML Elements

example.scss

Copied

$section-id: unique-id();

section[id="#{$section-id}"] {
  background-color: #f8f9fa;
  padding: 2rem;
}

In this example, a unique ID is generated for a section element, which can then be applied directly in the HTML to style that specific section without affecting others.

🎉 Conclusion

The unique-id() function in Sass is a powerful tool when you need to generate unique identifiers within your stylesheets. It helps prevent conflicts by ensuring that each identifier is distinct. Whether you're working on large projects with many components or simply want to avoid potential clashes, unique-id() provides a straightforward and effective solution.

By incorporating unique-id() into your Sass workflow, you can enhance the modularity and maintainability of your CSS. It’s a small but mighty function that can make a significant difference in the organization and uniqueness of your styles.