html

String Functions in Sass | Explained

Sass which is an extension of CSS stands for Syntactically Awesome Stylesheet. Sass pre-processes CSS and works well with all the versions of CSS and enhances the capability of the basic language. It is renowned for saving time and effort by preventing its users from using redundant CSS values. It facilitates its users by supporting the usage of mixins, variables, nesting, inheritance, functions, etc. This article focuses on the string functions in Sass.

String Functions in Sass

String functions in Sass are quite similar to string functions of other programming languages. However, what makes these functions in Sass differ from other languages is that strings in Sass are 1-based which means that the first character of a string gets stored at index 1 rather than index 0.

There are multiple string functions in Sass which we have discussed in detail below.

1. quote(string) function

This function includes a quote in a string and provides the resultant string.

Example

quote(Linux Hint)

Output

Linux Hint

2. str-index(string, substring) function

Each substring in a string has a first occurrence whose index is fetched by this function. If no substring exists then this function returns null.

Example

str-index("Linux Hint", "L")

Output

1

3. str-insert(string, insert, index) function

This function fetches the string after inserting the string provided at the index specified.

Example

str-insert("Hint", "Linux", 0)

Output

LinuxHint

4. str-length(string) function

For the purpose of fetching the length of a string in the form of characters, this function is used.

Example

str-length("Linux Hint")
[/cce_html

<strong>Output</strong>
[cce_html width="100%" height="100%" escaped="true" theme="blackboard" nowrap="0"]10

5. str-slice(string,start, end) function

This function fetches the characters of a string from the specified starting and ending indexes.

Example

str-slice("Linux Hint", 2, 5)

Output

inux

6. to-lower-case(string) function

This function transforms a string to lowercase letters and returns the result.

Example

to-lower-case("Linux Hint")

Output

linux hint

7. to-upper-case(string) function

This function transforms a string to upper case letters and returns the result.

Example

to-upper-case("linux hint")

Output

linux hint

7. to-upper-case(string) function

This function transforms a string to upper case letters and returns the result.

Example

to-upper-case("linux hint")

Output

LINUX HINT

8. unique-id() function

For the purpose of fetching a random yet unique unquoted string, this function is used.

Example

unique-id()

Output

abytji

9. unquote(string) function

In order to remove quotes from a string if there are any present, then this function is used.

Example

unquote("Linux Hint")

Output

Linux Hint

Conclusion

String functions in Sass are 1-based which means that the first character of a string gets stored at index 1 rather than index 0 and this is what makes these different from string functions in other programming languages. There are multiple string functions in Sass such as quote(string), str-length(string), unquote(string), etc. Each of these serves a different purpose which we have explained in this article along with relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.