Tutorials

Sass str-insert() Function

Posted in Sass Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The str-insert() function in Sass is a string manipulation utility that allows you to insert a substring into a string at a specified position.

This function is particularly useful when you need to dynamically modify strings, such as class names, file paths, or any other text-based data in your stylesheets.

💡 Syntax

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

Syntax

Copied

str-insert(string, insert, index)

🔢 Parameters

string: The string into which you want to insert another string.
insert: The substring you wish to add to the original string.
index: The position in the base string where the insertion should happen. This index is 1-based, meaning that an index of 1 refers to the beginning of the string.

↩️ Return Value

The function returns a new string with the substring inserted at the specified position.

📝 Example Usage

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

📜 Example 1: Basic Insertion

example.scss

Copied

$original-string: "Hello World!";
$inserted-string: str-insert($original-string, "Beautiful ", 7);

body::after {
  content: $inserted-string; // Outputs: "Hello Beautiful World!"
}

In this example, the word "Beautiful " is inserted into the original string "Hello World!" at the 7th position, resulting in "Hello Beautiful World!".

📜 Example 2: Inserting at the Beginning

example.scss

Copied

$path: "assets/images/photo.jpg";
$updated-path: str-insert($path, "/2024", 1);

.header {
  background-image: url(#{$updated-path}); // Outputs: "/2024assets/images/photo.jpg"
}

Here, the string "/2024" is inserted at the beginning of the file path, which is useful for dynamically updating paths based on conditions like the current year.

📜 Example 3: Inserting into a Class Name

example.scss

Copied

$base-class: "btn-primary";
$modifier: "large";
$full-class: str-insert($base-class, "-#{$modifier}", str-length($base-class) + 1);

.button {
  @extend .#{$full-class}; // Outputs: "btn-primary-large"
}

In this example, a modifier is inserted at the end of a class name, creating a new class like "btn-primary-large".

🎉 Conclusion

The str-insert() function in Sass is a powerful and flexible tool for manipulating strings within your stylesheets. Whether you need to adjust class names, modify file paths, or insert dynamic content into strings, str-insert() makes the process straightforward and efficient.

By mastering str-insert(), you can take full advantage of Sass's string manipulation capabilities, allowing for more dynamic and maintainable stylesheets. Experiment with different strings and insertion points to explore the full potential of this function in your projects.