string.quote($string) returns $string as a quoted Sass string. Already-quoted input stays quoted. Load with @use "sass:string".
string.quote(Helvetica) and string.quote("Helvetica") both become "Helvetica".
Useful for font-family names, content strings, and normalizing mixed token inputs.
string.unquote() removes quotes and can produce strings that are not valid CSS—use carefully.
@use "sass:string";
string.quote($string) //=> quoted string
string.quote(Helvetica); // "Helvetica"
string.quote("Helvetica"); // "Helvetica"
// Common CSS uses:
font-family: string.quote(Roboto), sans-serif;
content: string.quote(New);
// Global alias (legacy): quote($string)
// Prefer string.quote after @use "sass:string"Pattern: pass any string → get a quoted string → emit safe CSS for fonts and content.
Same characters, different quote state:
| Helper | Typical result | Use when |
|---|---|---|
string.quote | "Helvetica" | You need quotes in the CSS output |
string.unquote | Helvetica | You need an unquoted identifier (use carefully) |
Examples use @use "sass:string". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Unquoted and already-quoted inputs both become quoted strings.
@use "sass:meta";
@use "sass:string";
.probe {
--from-unquoted: #{meta.inspect(string.quote(Helvetica))};
--from-quoted: #{meta.inspect(string.quote("Helvetica"))};
--type: #{meta.type-of(string.quote(Helvetica))};
}string.Emit a quoted family name in font-family.
@use "sass:string";
.heading {
font-family: string.quote(Helvetica), sans-serif;
}Same characters, different quote state.
@use "sass:meta";
@use "sass:string";
$raw: Helvetica;
$q: string.quote($raw);
$u: string.unquote($q);
.compare {
--quoted: #{meta.inspect($q)};
--unquoted: #{meta.inspect($u)};
}contentPass an unquoted label into a mixin that quotes it for CSS.
@use "sass:string";
@mixin label($name) {
.badge {
content: string.quote($name);
}
}
@include label(New);Build several rules from a list of family names.
@use "sass:string";
$names: Helvetica, Roboto, Georgia;
@each $name in $names {
.font-#{$name} {
font-family: string.quote($name), sans-serif;
}
}Most quote bugs are confusing quote state with string content.
Calling quote twice does not double-wrap characters.
meta.inspect makes quote state obvious in custom properties.
Removing quotes can produce CSS that is not valid.
string.length is the same for quoted and unquoted forms of the same text.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
string.quote() | Dart Sass 1.23+ via @use "sass:string" |
| Return type | Quoted string |
| Already quoted | Stays quoted |
| Legacy global | quote($string) |
Compile with the Dart Sass CLI.
One line: to force a quoted Sass string, use string.quote($string).
Practical checklist:
1. @use "sass:string"
2. Pass quoted or unquoted input
3. Expect a quoted string result
4. Use for font-family and content
5. Use unquote only when you truly need no quotesExtract a portion of a string with 1-based indexes.
8 people found this page helpful