Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass String

Sass str-insert() Function

Posted in Sass Tutorial
Updated on Aug 25, 2024
By Mari Selvan
👁ī¸ 6 - Views
âŗ 4 mins
đŸ’Ŧ 1 Comment
Sass str-insert() Function

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

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