Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass String

Sass unique-id() Function

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

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

πŸ‘¨β€πŸ’» 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