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 0The following table lists all string functions in Sass.
| Function | Description | Examples |
|---|---|---|
| unquote($string) | Removes the quotes, if any, around a string | unquote("hello") Result: hello |
| quote($string) | Adds quotes to an unquoted string; returns a quoted string unmodified | quote(hello) Result: "hello" |
| quote("hello") Result: "hello" | ||
| str-length($string) | Returns the number of characters in a string | str-length("hello") Result: 5 |
| str-insert($string, $insert, $index) | Inserts the string specified as $insert at the specified index position inside string | str-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 found | str-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-at | str-slice("hello, world", 8) "world" |
| str-slice("hello, world", 8, 9) Result: "wo" | ||
| to-upper-case($string) | Returns a string containing $string converted to upper case | to-upper-case("hello") Result:"HELLO" |
| to-lower-case($string) | Returns a string containing $string converted to lower case | to-lower-case("Hello") "hello" |