Sass index() 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 index() function in Sass is a useful tool for finding the position of a specific value within a list.

It returns the index of the first occurrence of the value in the list, which is particularly helpful when working with lists in Sass to manage and manipulate CSS values dynamically.

💡 Syntax

The syntax of the index() function is simple and intuitive. It requires two arguments:

Syntax

Copied

index(list, value)

🔢 Parameters

list: A list of values (e.g., 1px solid red, ('apple', 'banana', 'cherry')).
value: The value you are searching for in the list.

↩️ Return Value

The function returns the index (1-based) of the first occurrence of the value in the list. If the value is not found, the function returns null.

📝 Example Usage

Here are some examples to demonstrate how index() can be effectively used in different scenarios.

📜 Example 1: Basic Usage with a List of Strings

example.scss

Copied

$fruits: ('apple', 'banana', 'cherry', 'date');
$index-of-banana: index($fruits, 'banana');

p {
  content: "The index of banana is #{$index-of-banana}";
}

In this example, the index() function searches for 'banana' in the $fruits list and returns 2, since 'banana' is the second item in the list.

📜 Example 2: Using index() with Numeric Values

example.scss

Copied

$sizes: 10px 20px 30px 40px;
$index-of-30px: index($sizes, 30px);

div {
  padding: nth($sizes, $index-of-30px);
}

Here, the function finds that 30px is the third item in the $sizes list and returns 3. This value can then be used to dynamically set padding or other properties.

📜 Example 3: Handling a Non-Existent Value

example.scss

Copied

$colors: blue red green yellow;
$index-of-purple: index($colors, purple);

body {
  color: if($index-of-purple == null, black, purple);
}

In this case, since purple is not in the $colors list, the index() function returns null, allowing you to handle the absence of a value gracefully.

📜 Example 4: Practical Use in a Map

example.scss

Copied

$map: (primary: blue, secondary: red, accent: yellow);
$index-of-accent: index(map-values($map), yellow);

h1 {
  color: nth(map-values($map), $index-of-accent);
}

This example demonstrates how index() can be combined with the map-values() function to work with maps in Sass, allowing you to find the position of a value within a map’s values.

🎉 Conclusion

The index() function in Sass is an essential tool for working with lists. By enabling you to find the position of values within lists, it adds a layer of flexibility and control to your stylesheets. Whether you're managing a list of colors, sizes, or any other values, index() helps you make your Sass code more dynamic and efficient.

Understanding and leveraging the index() function can simplify the management of complex lists and enhance your ability to create dynamic styles. As you work more with Sass, you'll find many opportunities to use index() to streamline your code and improve its maintainability.