Skip to main content

Sass: String Functions

Sass strings are NOT zero-based arrays. The first character in a Sass string is at index 1, not 0.

For example. the Sass function str-index($string, $substring) returns the position of the first occurrence of $substring in $string. The equivalent JavaScript function is the indexOf(<substring>) method. But given the same arguments, they don't return the same values:

$str-index("hello","h"); //Sass returns 1

"hello".indexOf("h"); //JavaScript returns 0

Sass String Functions

The following table lists all string functions in Sass:

FunctionDescriptionExample
unquote($string)Removes the quotes, if any, around a stringunquote("hello") Result: hello
quote($string)Adds quotes to an unquoted string; returns a quoted string unmodifiedquote(hello) Result: "hello" quote("hello") Result: "hello"
str-length($string)Returns the number of characters in a stringstr-length("hello") Result: 5
str-insert($string, $insert, $index)Inserts the string specified as $insert at the specified index position inside stringstr-insert(" world", "hello", 0) Result: "hello world"
str-index($string, $substring)Returns the index of the first occurrence of $substring inside $string, or null if the string is not foundstr-index("Hello", "H") Result: 1 str-index("hello", "H") Result: null
str-slice($string, $start-at, [$end-at])Returns a substring beginning at position $start-at and optionally ending at position $end-atstr-slice("hello, world", 8) Result: "world" str-slice("hello, world", 8, 9) Result: "wo"
to-upper-case($string)Returns a string containing $string converted to upper caseto-upper-case("hello") Result:"HELLO"
to-lower-case($string)Returns a string containing $string converted to lower caseto-lower-case("Hello") Result: "hello"

Table of Contents