Strings are sequences of Unicode characters. Sass has two kinds with the same internal type but different CSS output: quoted ("Helvetica Neue" and unquoted identifiers like bold.
Use unquoted only when CSS needs an identifier. Color names, null, true/false, and and/or/not are not unquoted strings.
Injecting a quoted string with #{ } removes the quotes—handy for selectors. See interpolation.
1 is the first character; -1 is the last. Missing searches return null.
@use "sass:string";
"Helvetica Neue"; // quoted
bold; // unquoted identifier
"Roboto #{$variant}"; // interpolation inside quotes
string.quote(bold); // "bold"
string.unquote(".a:hover"); // .a:hover
string.index($s, "Neue"); // 1-based index, or null
string.slice($s, -4); // from near the endPattern: pick quoted or unquoted → convert with string.quote / string.unquote → search/slice with 1-based indexes.
Everyday string tools:
| Pattern | Result idea |
|---|---|
"text" / 'text' | Quoted string (CSS string) |
bold / -ms-flex | Unquoted identifier |
string.quote() / unquote() | Convert between forms |
#{$quoted} | Quotes removed when interpolating |
string.index / slice | 1-based indexes (-1 = last) |
\a / \1F46D | CSS-style escapes |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
quote / unquoteConvert between quoted and unquoted forms.
@use "sass:string";
@use "sass:meta";
.demo {
content: string.quote(bold);
--unquoted: #{meta.inspect(string.unquote(".widget:hover"))};
}Quoted strings keep their text; interpolation works inside them.
$roboto-variant: "Mono";
.demo {
font-family: "Helvetica Neue";
--path: #{"C:\\Program Files"};
--interp: #{"Roboto #{$roboto-variant}"};
}Roboto Mono.CSS identifiers stay unquoted; interpolation can build prefixes.
$prefix: ms;
.box {
font-weight: bold;
display: -#{$prefix}-flex;
}-ms-flex.Indexes start at 1; negative indexes count from the end.
@use "sass:string";
.demo {
--helvetica: #{string.index("Helvetica Neue", "Helvetica")};
--neue: #{string.index("Helvetica Neue", "Neue")};
--slice: #{string.slice("Roboto Mono", -4)};
--missing: #{string.index("Helvetica Neue", "Roboto") == null};
}slice.null.Store a selector as a quoted string; interpolate to drop the quotes.
$sel: ".widget:hover";
#{$sel} {
color: #036;
}Most string bugs are unquoted keywords that are not strings, or 0-based index habits.
Bare red is a color. Quote it ("red") when you mean a string key or label. See colors.
Same idea as lists. Use -1 for the last character.
Useful for selectors; surprising if you wanted a CSS string. Keep quotes on the property when needed.
Falsey—works in @if. See null.
Strings and sass:string are core Sass on Dart Sass.
| Feature | Status |
|---|---|
| Quoted / unquoted strings | Supported |
| CSS escapes | Supported |
| Escape normalization (unquoted) | Dart Sass 1.11+ |
sass:string module | Supported |
Compile with the Dart Sass CLI.
null.One line: quote text by default, unquote when CSS needs an identifier, and remember interpolation drops quotes.
Practical checklist:
1. Prefer "quoted" strings for most text
2. Use unquoted only for CSS identifiers
3. Convert with string.quote / string.unquote
4. Remember #{} removes quotes
5. Use 1-based indexes with string.index / sliceWrite hex, names, and modern color spaces—and keep string keys quoted.
8 people found this page helpful