String Functions

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Sass - String Functions

If you've worked in strings in a programming language, you'll be quite comfortable with the Sass string functions, with one exception: 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

The following table lists all string functions in Sass.

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