Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass List

Sass nth() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
👁ī¸ 13 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass nth() Function

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

👨‍đŸ’ģ 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