Sass nth() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 34 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The nth() function in Sass is a handy utility that allows you to retrieve a specific item from a list. Lists are a fundamental data type in Sass, often used to group related values, such as colors, sizes, or other properties.

The nth() function makes it easy to access individual elements from these lists, enabling more dynamic and flexible styling.

💡 Syntax

The syntax of the nth() function is straightforward. It takes two arguments:

Syntax

Copied

nth(list, index)

🔢 Parameters

list: A space-separated or comma-separated list of values.
index: The position of the item you want to retrieve. The index starts at 1, meaning nth($list, 1) returns the first item.

↩️ Return Value

The function returns the item from the list at the specified index.

📝 Example Usage

Let's explore some examples to understand how the nth() function works in different scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

$colors: red blue green yellow;
$first-color: nth($colors, 1);
$third-color: nth($colors, 3);

.header {
  background-color: $first-color; // red
}

.footer {
  background-color: $third-color; // green
}

In this example, the list $colors contains four colors. The nth() function is used to retrieve the first and third colors from the list.

📜 Example 2: Using with a Comma-Separated List

example.scss

Copied

$font-sizes: 12px, 14px, 16px, 18px;
$large-font-size: nth($font-sizes, 4);

p {
  font-size: $large-font-size; // 18px
}

Here, a comma-separated list of font sizes is used. The nth() function retrieves the fourth item from the list, which is 18px.

📜 Example 3: Dynamic Indexing

example.scss

Copied

$spacing-sizes: 5px 10px 15px 20px;

@for $i from 1 through length($spacing-sizes) {
  .padding-#{$i} {
    padding: nth($spacing-sizes, $i);
  }
}

This example demonstrates dynamic indexing using a loop. The nth() function retrieves different spacing sizes based on the loop index, creating a series of classes with varying padding.

📜 Example 4: Accessing Nested Lists

example.scss

Copied

$nested-list: (red blue) (green yellow) (black white);
$second-item: nth(nth($nested-list, 2), 2);

.box {
  color: $second-item; // yellow
}

In this more complex example, nth() is used to access an item from a nested list. The function first retrieves the second nested list (green yellow), then retrieves the second item from that list, which is yellow.

🎉 Conclusion

The nth() function in Sass is an essential tool for working with lists. Whether you're dealing with simple lists of colors or more complex nested lists, nth() provides an easy way to access specific items based on their position. This function can be particularly useful when creating dynamic styles based on lists, such as generating classes in loops or retrieving values from predefined sets.

By mastering nth(), you can write more efficient and flexible Sass code, making it easier to manage and maintain your stylesheets. Experiment with different list types and indexing techniques to fully leverage the power of nth() in your projects.