Sass String Functions

Sass String Functions

Sass String Functions are used to manipulate text values (strings) such as class names, file paths, font names, and dynamic selectors.
They are very useful when working with dynamic CSS, theming, and utility classes.

 What Is a String in Sass?

A string can be:

• Quoted → "Helvetica"

• Unquoted → Helvetica

 Common Sass String Functions

1️⃣ quote()

Adds quotes to a string.

✔ Output:

2️⃣ unquote()

Removes quotes from a string.

✔ Output:

3️⃣ str-length()

Returns the number of characters in a string.

✔ Output:

4️⃣ str-insert()

Inserts a string at a specific position.

✔ Output:

5️⃣ str-index()

Finds the position of a substring.

✔ Output:

(Returns null if not found)

6️⃣ str-slice()

Extracts part of a string.

✔ Output:

7️⃣ to-upper-case()

Converts string to uppercase.

✔ Output:

8️⃣ to-lower-case()

Converts string to lowercase.

✔ Output:

 String Interpolation (#{})

Used to insert variables into strings or selectors.

✔ Output:

 Real-Life Example (Dynamic Class Names)

 Example: File Path Handling

❗ Notes & Best Practices

✔ Use strings for dynamic CSS
✔ Prefer interpolation over concatenation
✔ Remember: Sass strings are 1-based indexed
✔ Be careful with quoted vs unquoted strings

📌 Summary

• It provides powerful string functions

• Useful for dynamic selectors & paths

• Works great with interpolation

• Helps reduce repetition and errors