Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass String

Sass str-slice() Function

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

Photo Credit to CodeToFun

🙋 Introduction

The str-slice() function in Sass is a handy utility for working with strings. It allows you to extract a substring from a given string, similar to how the slice() function works in many programming languages.

This function is particularly useful when you need to manipulate or extract specific parts of a string, such as trimming prefixes or suffixes, or obtaining a portion of a string for further use in your stylesheets.

💡 Syntax

The syntax for the str-slice() function is simple and flexible. It takes three arguments:

Syntax
Copied
Copy To Clipboard
str-slice(string, start-at, [end-at])

đŸ”ĸ Parameters

  • string: The input string from which you want to extract a part.
  • start-at: The starting index for the extraction.
  • end-at (Optional): The ending index for the extraction.

↩ī¸ Return Value

The function returns a new string that is a substring of the original string, starting from the start-at index and optionally ending at the end-at index.

📝 Example Usage

Let's explore some examples to understand how str-slice() can be used in different scenarios.

📜 Example 1: Basic Extraction

example.scss
Copied
Copy To Clipboard
$full-string: "Hello, World!";
$sliced-string: str-slice($full-string, 8);

body::after {
  content: $sliced-string; // Outputs "World!"
}

In this example, the str-slice() function extracts the substring starting from the 8th character of the string "Hello, World!", resulting in "World!".

📜 Example 2: Specifying Both Start and End Indexes

example.scss
Copied
Copy To Clipboard
$full-string: "Sass is awesome!";
$sliced-string: str-slice($full-string, 6, 7);

h1::before {
  content: $sliced-string; // Outputs "is"
}

Here, the str-slice() function extracts the substring from the 6th to the 7th character, resulting in "is".

📜 Example 3: Extracting with Negative Indexes

example.scss
Copied
Copy To Clipboard
$full-string: "Web Development";
$sliced-string: str-slice($full-string, -11, -1);

p::before {
  content: $sliced-string; // Outputs "Development"
}

In this example, negative indexes are used to extract the substring "Development" from the original string "Web Development". Negative indexes count from the end of the string.

📜 Example 4: Extracting to the End of the String

example.scss
Copied
Copy To Clipboard
$full-string: "Responsive Design";
$sliced-string: str-slice($full-string, 11);

h2::before {
  content: $sliced-string; // Outputs "Design"
}

This example shows how to extract a substring from the 11th character to the end of the string, resulting in "Design".

🎉 Conclusion

The str-slice() function in Sass is a powerful tool for string manipulation, allowing you to easily extract specific portions of a string for use in your styles. Whether you're dealing with text, classes, or other string-based data, str-slice() provides a simple and effective way to manage and transform your strings.

By understanding how to use str-slice(), you can create more dynamic and responsive stylesheets, making your Sass code cleaner and more efficient. Experiment with different start and end indexes to see the full range of possibilities this function offers 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