Tutorials

Sass str-index() Function

Posted in Sass Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 48 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The str-index() function in Sass is a handy tool for working with strings. It allows you to find the first occurrence of a substring within a string and returns the position (index) of that substring.

This function is particularly useful for string manipulation tasks, such as parsing and searching within strings, and can be a valuable asset when working with dynamic content in your stylesheets.

💡 Syntax

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

Syntax

Copied

str-index(string, substring)

🔢 Parameters

string: The input string where the search is performed.
substring: The substring to locate within the main string.

↩️ Return Value

The function returns the index (1-based) of the first occurrence of the substring within the main string. If the substring is not found, it returns null.

📝 Example Usage

Let's explore some examples to understand how str-index() can be applied in various scenarios.

📜 Example 1: Basic Usage

example.scss

Copied

$full-string: "hello world";
$index: str-index($full-string, "world");

body::after {
  content: "The index of 'world' is #{$index}.";
}

In this example, the function searches for the substring "world" in the string "hello world". The str-index() function returns 7 because "world" starts at the 7th character of the main string.

📜 Example 2: Substring Not Found

example.scss

Copied

$full-string: "Sass is awesome";
$index: str-index($full-string, "great");

body::before {
  content: if($index == null, "Substring not found", "Substring found at index #{$index}");
}

Here, the function searches for the substring "great" in "Sass is awesome". Since the substring is not found, the function returns null, and the output will be "Substring not found".

📜 Example 3: Searching for a Character

example.scss

Copied

$full-string: "abcdefg";
$index: str-index($full-string, "d");

button::after {
  content: "The character 'd' is at index #{$index}.";
}

In this case, the function searches for the character "d" in the string "abcdefg". The function returns 4 as "d" is the 4th character in the string.

📜 Example 4: Multiple Occurrences

example.scss

Copied

$full-string: "ababab";
$index: str-index($full-string, "ab");

p {
  content: "The first occurrence of 'ab' is at index #{$index}.";
}

When searching for the substring "ab" in "ababab", the function returns 1, which is the index of the first occurrence of "ab".

🎉 Conclusion

The str-index() function in Sass is a powerful and efficient way to locate substrings within strings. It can be particularly useful when you need to analyze or manipulate strings within your stylesheets, enabling dynamic content creation and more complex styling logic.

By incorporating str-index() into your Sass workflow, you can enhance your ability to handle strings, making your stylesheets more flexible and robust. Whether you're parsing URLs, customizing content, or simply working with text, str-index() is a function that every Sass developer should be familiar with.