String Functions

quote($string) //=> string 

Returns $string as a quoted string.

SCSS Syntax

@debug quote(Helvetica); // "Helvetica"
@debug quote("Helvetica"); // "Helvetica"

Sass Syntax

@debug quote(Helvetica)  // "Helvetica"
@debug quote("Helvetica")  // "Helvetica"
str-index($string, $substring) //=> number 

Returns the first index of $substring in $string, or null if $string doesn’t contain $substring.

SCSS Syntax

@debug str-index("Helvetica Neue", "Helvetica"); // 1
@debug str-index("Helvetica Neue", "Neue"); // 11

Sass Syntax

@debug str-index("Helvetica Neue", "Helvetica")  // 1
@debug str-index("Helvetica Neue", "Neue")  // 11
str-insert($string, $insert, $index) //=> string 

Returns a copy of $string with $insert inserted at $index.

SCSS Syntax

@debug str-insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug str-insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"

Sass Syntax

@debug str-insert("Roboto Bold", " Mono", 7)  // "Roboto Mono Bold"
@debug str-insert("Roboto Bold", " Mono", -6)  // "Roboto Mono Bold"

If of $index is higher than the length of $string, $insert is added to the end. If $index is smaller than the negative length of the string, $insert is added to the beginning.

SCSS Syntax

@debug str-insert("Roboto", " Bold", 100); // "Roboto Bold"
@debug str-insert("Bold", "Roboto ", -100); // "Roboto Bold"

Sass Syntax

@debug str-insert("Roboto", " Bold", 100)  // "Roboto Bold"
@debug str-insert("Bold", "Roboto ", -100)  // "Roboto Bold"
str-length($string) //=> number 

Returns the number of characters in $string.

SCSS Syntax

@debug str-length("Helvetica Neue"); // 14
@debug str-length(bold); // 4
@debug str-index(""); // 0

Sass Syntax

@debug str-length("Helvetica Neue")  // 14
@debug str-length(bold)  // 4
@debug str-index("")  // 0
str-slice($string, $start-at, $end-at: -1) //=> string 

Returns the slice of $string starting at index $start-at and ending at index $end-at (both inclusive).

SCSS Syntax

@debug str-slice("Helvetica Neue", 11); // "Neue"
@debug str-slice("Helvetica Neue", 1, 3); // "Hel"
@debug str-slice("Helvetica Neue", 1, -6); // "Helvetica"

Sass Syntax

@debug str-slice("Helvetica Neue", 11)  // "Neue"
@debug str-slice("Helvetica Neue", 1, 3)  // "Hel"
@debug str-slice("Helvetica Neue", 1, -6)  // "Helvetica"
to-upper-case($string) //=> string 

Returns a copy of $string with the ASCII letters converted to upper case.

SCSS Syntax

@debug to-upper-case("Bold"); // "BOLD"
@debug to-upper-case(sans-serif); // SANS-SERIF

Sass Syntax

@debug to-upper-case("Bold")  // "BOLD"
@debug to-upper-case(sans-serif)  // SANS-SERIF
to-lower-case($string) //=> string 

Returns a copy of $string with the ASCII letters converted to lower case.

SCSS Syntax

@debug to-lower-case("Bold"); // "bold"
@debug to-lower-case(SANS-SERIF); // sans-serif

Sass Syntax

@debug to-lower-case("Bold")  // "bold"
@debug to-lower-case(SANS-SERIF)  // sans-serif
unique-id() //=> string 

Returns a randomly-generated unquoted string that’s guaranteed to be a valid CSS identifier and to be unique within the current Sass compilation.

SCSS Syntax

@debug unique-id(); // uabtrnzug
@debug unique-id(); // u6w1b1def

Sass Syntax

@debug unique-id(); // uabtrnzug
@debug unique-id(); // u6w1b1def
unquote() //=> string 

Returns $string as an unquoted string. This can produce strings that aren’t valid CSS, so use with caution.

SCSS Syntax

@debug unquote("Helvetica"); // Helvetica
@debug unquote(".widget:hover"); // .widget:hover

Sass Syntax

@debug unquote("Helvetica")  // Helvetica
@debug unquote(".widget:hover")  // .widget:hover