Strings

Strings are sequences of characters (specificallyUnicode code points). Sass supports two kinds of strings whose internal structure is the same but which are rendered differently:quoted strings, like"Helvetica Neue", andunquoted strings (also known asidentifiers), likebold. Together, these cover the different kinds of text that appear in CSS.

💡 Fun fact:

You can convert a quoted string to an unquoted string using thestring.unquote() function, and you can convert an unquoted string to aquoted string using thestring.quote() function.

Sass Playground

SCSS Syntax

@use"sass:string";

@debug string.unquote(".widget:hover");// .widget:hover
@debug string.quote(bold);// "bold"
Sass Playground

Sass Syntax

@use "sass:string"

@debug string.unquote(".widget:hover")  // .widget:hover
@debug string.quote(bold)  // "bold"

EscapesEscapes permalink

All Sass strings support the standardCSSescape codes:

  • Any character other than a letter from A to F or a number from 0 to 9 (even anewline!) can be included as part of a string by writing\ in front of it.

  • Any character can be included as part of a string by writing\ followed byitsUnicode code point number written inhexadecimal. You canoptionally include a space after the code point number to indicate where theUnicode number ends.

Sass Playground

SCSS Syntax

@debug"\"";// '"'
@debug \.widget;// \.widget
@debug"\a";// "\a" (a string containing only a newline)
@debug"line1\a line2";// "line1\a line2"
@debug"Nat + Liz \1F46D";// "Nat + Liz 👭"
Sass Playground

Sass Syntax

@debug "\""  // '"'
@debug \.widget  // \.widget
@debug "\a"  // "\a" (a string containing only a newline)
@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
@debug "Nat+ Liz \1F46D"  // "Nat+ Liz 👭"

💡 Fun fact:

For characters that are allowed to appear in strings, writing the Unicodeescape produces exactly the same string as writing the character itself.

QuotedQuoted permalink

Quoted strings are written between either single or double quotes, as in"Helvetica Neue". They can containinterpolation, as well as any unescapedcharacter except for:

  • \, which can be escaped as\\;
  • ' or", whichever was used to define that string, which can be escaped as\' or\";
  • newlines, which can be escaped as\a (including a trailing space).

Quoted strings are guaranteed to be compiled toCSS strings that have the samecontents as the original Sass strings. The exact format may vary based on theimplementation or configuration—a string containing a double quote may becompiled to"\"" or'"', and a non-ASCII character may or may not beescaped. But that should be parsed the same in any standards-compliantCSSimplementation, including all browsers.

Sass Playground

SCSS Syntax

@debug"Helvetica Neue";// "Helvetica Neue"
@debug"C:\\Program Files";// "C:\\Program Files"
@debug"\"Don't Fear the Reaper\"";// "\"Don't Fear the Reaper\""
@debug"line1\a line2";// "line1\a line2"

$roboto-variant:"Mono";
@debug"Roboto #{$roboto-variant}";// "Roboto Mono"
Sass Playground

Sass Syntax

@debug "Helvetica Neue"  // "Helvetica Neue"
@debug "C:\\Program Files"  // "C:\\Program Files"
@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
@debug "line1\a line2"  // "line1\a line2"

$roboto-variant: "Mono"
@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"

💡 Fun fact:

When a quoted string is injected into another value via interpolation,itsquotes are removed! This makes it easy to write strings containingselectors, for example, that can be injected into style rules without adding quotes.

UnquotedUnquoted permalink

Unquoted strings are written asCSSidentifiers, following the syntaxdiagram below. They may includeinterpolation anywhere.

Railroad diagram copyright © 2018W3C® (MIT,ERCIM, Keio, Beihang).W3Cliability,trademark andpermissive document license rules apply.
Sass Playground

SCSS Syntax

@debug bold;// bold
@debug -webkit-flex;// -webkit-flex
@debug --123;// --123

$prefix: ms;
@debug -#{$prefix}-flex;// -ms-flex
Sass Playground

Sass Syntax

@debug bold  // bold
@debug -webkit-flex  // -webkit-flex
@debug --123  // --123

$prefix: ms
@debug -#{$prefix}-flex  // -ms-flex

⚠️ Heads up!

Not all identifiers are parsed as unquoted strings:

Because of this, it’s generally a good idea to write quoted strings unlessyou’re specifically writing the value of aCSS property that uses unquoted strings.

Escapes in Unquoted StringsEscapes in Unquoted Strings permalink

Compatibility (Normalization):
Dart Sass
since 1.11.0
LibSass
✗
Ruby Sass
✗

LibSass, Ruby Sass, and older versions of Dart Sass don’t normalize escapes inidentifiers. Instead, the text in the unquoted string is the exact text theuser wrote. For example,\1F46D and👭 are not considered equivalent.

When an unquoted string is parsed, the literal text of escapes are parsed aspart of the string. For example,\a is parsed as the characters\,a, andspace. In order to ensure that unquoted strings that have the same meanings inCSS are parsed the same way, though, these escapes arenormalized. For eachcode point, whether it’s escaped or unescaped:

  • If it’s a valid identifier character, it’s included unescaped in the unquotedstring. For example,\1F46D returns the unquoted string👭.

  • If it’s a printable character other than a newline or a tab, it’s includedafter a\. For example,\21 returns the unquoted string\!.

  • Otherwise, the lowercase Unicode escape is included with a trailing space. Forexample,\7Fx returns the unquoted string\7f x.

Sass Playground

SCSS Syntax

@use"sass:string";

@debug \1F46D;// 👭
@debug \21;// \!
@debug \7Fx;// \7f x
@debug string.length(\7Fx);// 5
Sass Playground

Sass Syntax

@use "sass:string"

@debug \1F46D  // 👭
@debug \21  // \!
@debug \7Fx  // \7f x
@debug string.length(\7Fx)  // 5

Other Unquoted StringsOther Unquoted Strings permalink

In addition to identifiers, there are a few unusual corners ofCSS syntax thatare parsed as unquoted strings. These include:

  • Special functions likeurl() andelement() whose arguments havesyntax that’s different from normalCSS expression syntax.

  • Unicode range tokens likeU+0-7F orU+4??.

  • Hash tokens whose values are identifiers but which aren’t valid hex colors.

  • The value%. (This is only available when it’s not directly between two othervalues, because otherwise it would be ambiguous withthe modulo operator.)

  • The special value!important.

Sass Playground

SCSS Syntax

@debugurl(https://example.org); // url(https://example.org)
@debug U+4??;// U+4??
@debug #my-background;// #my-background
@debug %;// %
@debug!important;// !important
Sass Playground

Sass Syntax

@debug url(https://example.org)  // url(https://example.org)
@debug U+4??  // U+4??
@debug #my-background  // #my-background
@debug %  // %
@debug !important  // !important

String IndexesString Indexes permalink

Sass has a number ofstring functions that take or return numbers, calledindexes, that refer to the characters in a string. The index 1 indicates thefirst character of the string. Note that this is different than many programminglanguages where indexes start at 0! Sass also makes it easy to refer to the endof a string. The index -1 refers to the last character in a string, -2 refers tothe second-to-last, and so on.

Sass Playground

SCSS Syntax

@use"sass:string";

@debug string.index("Helvetica Neue","Helvetica");// 1
@debug string.index("Helvetica Neue","Neue");// 11
@debug string.slice("Roboto Mono", -4);// "Mono"
Sass Playground

Sass Syntax

@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11
@debug string.slice("Roboto Mono", -4)  // "Mono"