Tutorials

Sass set-nth() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 30 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The set-nth() function in Sass is a powerful utility for working with lists. It allows you to replace an item at a specific index in a list with a new value.

This function is particularly useful when you need to update a specific element in a list while preserving the rest of the list's content.

💡 Syntax

The syntax of the set-nth() function is simple and intuitive. It takes three arguments:

Syntax

Copied

set-nth(list, n, value)

🔢 Parameters

list: The input list where the modification will occur.
n: The index (1-based) of the item you want to replace.
value: The new value that will replace the item at the specified index.

↩️ Return Value

The function returns a new list with the item at the specified index replaced by the new value.

📝 Example Usage

Let's explore some examples to understand how the set-nth() function can be applied.

📜 Example 1: Basic Usage

example.scss

Copied

$original-list: (apple, banana, cherry);
$new-list: set-nth($original-list, 2, orange);

div {
  content: $new-list;
}

In this example, the item at index 2 (which is banana) is replaced by orange. The resulting list is (apple, orange, cherry).

📜 Example 2: Replacing a Value in a List of Colors

example.scss

Copied

$colors: (red, green, blue);
$updated-colors: set-nth($colors, 3, purple);

body {
  background-color: nth($updated-colors, 3);
}

Here, the third item in the list of colors (blue) is replaced by purple. The background color of the body will be set to purple.

📜 Example 3: Using set-nth() in a Loop

example.scss

Copied

$fruits: (apple, banana, cherry);

@for $i from 1 through length($fruits) {
  .fruit-#{$i} {
    content: set-nth($fruits, $i, grape);
  }
}

In this example, each iteration of the loop replaces the corresponding item in the $fruits list with grape. The output for each class will show a list with grape at the current index.

🎉 Conclusion

The set-nth() function in Sass is an essential tool for list manipulation. It allows you to precisely modify elements within a list, making it easier to manage and update list-based data structures in your stylesheets. Whether you're adjusting a list of colors, fonts, or any other set of values, set-nth() provides a flexible and efficient way to make targeted changes.

By understanding and using the set-nth() function, you can take full control of list modifications in your Sass projects, leading to more dynamic and maintainable code. Experiment with this function to see how it can streamline your workflow and enhance your ability to manage lists effectively.