Sass Strings

What You’ll Learn

Sass strings are sequences of Unicode characters. This page covers quoted vs unquoted strings, escapes, interpolation, 1-based indexes, quote / unquote, and five compiled examples.

What Are Sass Strings?

Official docs: strings are sequences of characters (Unicode code points). Sass supports two kinds whose internal structure is the same but which render differently:

• Quoted strings — "Helvetica Neue" (CSS string values)
• Unquoted strings (identifiers) — bold (CSS keywords / names)

Together they cover the different kinds of text that appear in CSS. Convert with string.quote() and string.unquote() from @use "sass:string".

📝 Syntax

$family: "Helvetica Neue"; // quoted
$weight: bold;             // unquoted identifier
$prefix: ms;               // unquoted
$vendor: -#{$prefix}-flex; // -ms-flex

📄 Quoted Strings

Write quoted strings between single or double quotes. They support interpolation and standard escapes. Sass guarantees the compiled CSS string has the same contents (exact quote style may vary by implementation).

• Escape a backslash as \\
• Escape the active quote as \" or \'
• Escape a newline as \a (backslash, a, trailing space)

🏷️ Unquoted Strings

Unquoted strings follow CSS identifier syntax and may include interpolation anywhere. They compile without surrounding quotes.

Official docs also treat some special CSS tokens as unquoted strings, including url(…), Unicode ranges like U+4??, some hash tokens, standalone %, and !important.

🔒 Escapes

All Sass strings support standard CSS escapes: write \ before a character, or \ plus a hexadecimal Unicode code point (optional trailing space). For characters that are already allowed in strings, the Unicode escape produces the same string as typing the character itself.

🔢 String Indexes

Official docs: string functions use indexes that refer to characters. Index 1 is the first character (not 0). Negative indexes count from the end: -1 is the last character, -2 the second-to-last, and so on.

@use "sass:string";

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

Examples Gallery

Each example shows how Sass treats text at compile time. Open View Compiled CSS for verified output.

@use "sass:string";
@use "sass:meta";

.demo {
  --u: #{meta.inspect(string.unquote(".widget:hover"))};
  --q: #{meta.inspect(string.quote(bold))};
  --t1: #{meta.type-of(string.unquote(".widget:hover"))};
  --t2: #{meta.type-of(string.quote(bold))};
}

.demo {
  --u: .widget:hover;
  --q: "bold";
  --t1: string;
  --t2: string;
}

@use "sass:meta";

$widget: "my-widget";
$roboto-variant: "Mono";

.quoted {
  font-family: "Helvetica Neue", sans-serif;
  --font: #{meta.inspect("Roboto #{$roboto-variant}")};
}

.#{$widget} {
  color: navy;
}

.quoted {
  font-family: "Helvetica Neue", sans-serif;
  --font: "Roboto Mono";
}

.my-widget {
  color: navy;
}

@use "sass:meta";

$prefix: ms;

.unquoted {
  font-weight: bold;
  display: -#{$prefix}-flex;
  --a: #{meta.inspect(bold)};
  --b: #{meta.inspect(-webkit-flex)};
  --c: #{meta.inspect(--123)};
  --d: #{meta.type-of(red)};
  --e: #{meta.type-of(null)};
  --f: #{meta.type-of(true)};
}

.unquoted {
  font-weight: bold;
  display: -ms-flex;
  --a: bold;
  --b: -webkit-flex;
  --c: --123;
  --d: color;
  --e: null;
  --f: bool;
}

@use "sass:string";
@use "sass:meta";

.escapes {
  --quote: #{meta.inspect("\"")};
  --path: #{meta.inspect("C:\\Program Files")};
  --nl-len: #{meta.inspect(string.length("line1\a line2"))};
  --bang: #{meta.inspect(\21)};
  --esc-len: #{meta.inspect(string.length(\7Fx))};
}

.escapes {
  --quote: '"';
  --path: "C:\\Program Files";
  --nl-len: 11;
  --bang: \!;
  --esc-len: 5;
}

@use "sass:string";
@use "sass:meta";

.indexes {
  --i1: #{meta.inspect(string.index("Helvetica Neue", "Helvetica"))};
  --i2: #{meta.inspect(string.index("Helvetica Neue", "Neue"))};
  --slice: #{meta.inspect(string.slice("Roboto Mono", -4))};
  --missing: #{meta.inspect(string.index("Roboto", "x"))};
}

.indexes {
  --i1: 1;
  --i2: 11;
  --slice: "Mono";
  --missing: null;
}

🚀 Real-World Use Cases

• Font stacks — quoted family names with spaces.
• Dynamic selectors — interpolate quoted class/BEM names.
• Vendor prefixes — build unquoted -ms- / -webkit- identifiers.
• Content / paths — escaped quotes and Windows-style paths.
• Parsing helpers — string.index / slice inside functions.

⚠️ Common Pitfalls

• Assuming color names are strings — red is a color.
• 0-based indexes — Sass string indexes start at 1.
• Unexpected quotes in selectors — remember interpolation strips them.
• Using unquoted true / null as text — quote them if you need strings.
• Building numbers with #{$n}px — that makes a string, not a number.

💡 Best Practices