Sass string.quote() Function

What You’ll Learn

string.quote() belongs to the built-in sass:string module. It returns a value as a quoted Sass string—handy for font-family, content, and other CSS that needs quotes in the output. This page covers quoted vs unquoted strings, vs string.unquote, and five compiled examples.

What Is string.quote()?

Official docs: returns $string as a quoted string. In Sass, strings come in two flavors—quoted ("Helvetica") and unquoted (Helvetica). Both can hold the same characters; quotes change how the value is written into CSS.

• Unquoted input becomes quoted: string.quote(Helvetica) → "Helvetica".
• Already-quoted input stays quoted: string.quote("Helvetica") → "Helvetica".
• See also string.unquote() when you need the opposite.

📝 Syntax

@use "sass:string";

// Recommended
string.quote($string)

// Legacy global name
quote($string)

Parameters

Return value

📦 Loading sass:string

// Recommended — namespaced (Dart Sass 1.23+)
@use "sass:string";
$name: string.quote(Helvetica); // "Helvetica"

// Optional — bring members into scope
@use "sass:string" as *;
$name: quote(Helvetica);

// Legacy global
$name: quote(Helvetica);

🎨 Official Patterns

Both calls end as quoted strings. The useful difference is the input: unquoted identifiers become safely quoted for CSS output.

⚖️ quote vs unquote

🛠 Compatibility

This is about Sass compilers, not browsers. Quoting happens at compile time.

Prefer current Dart Sass so the module API matches the official docs.

Examples Gallery

Each example uses string.quote at compile time (Dart Sass 1.23+). Open View Compiled CSS for verified output.

@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))};
}

.probe {
  --from-unquoted: "Helvetica";
  --from-quoted: "Helvetica";
  --type: string;
}

@use "sass:string";

.heading {
  font-family: string.quote(Helvetica), sans-serif;
}

.heading {
  font-family: "Helvetica", sans-serif;
}

@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)};
}

.compare {
  --quoted: "Helvetica";
  --unquoted: Helvetica;
}

@use "sass:string";

@mixin label($name) {
  .badge {
    content: string.quote($name);
  }
}

@include label(New);

.badge {
  content: "New";
}

@use "sass:string";

$names: Helvetica, Roboto, Georgia;

@each $name in $names {
  .font-#{$name} {
    font-family: string.quote($name), sans-serif;
  }
}

.font-Helvetica {
  font-family: "Helvetica", sans-serif;
}

.font-Roboto {
  font-family: "Roboto", sans-serif;
}

.font-Georgia {
  font-family: "Georgia", sans-serif;
}

🚀 Real-World Use Cases

• Font stacks — quote family names from design tokens.
• Generated content — build safe content strings in mixins.
• Design-system APIs — accept unquoted identifiers and emit quoted CSS.
• Debugging — pair with meta.inspect to see quote state.
• Token pipelines — normalize mixed quoted/unquoted inputs before output.

⚠️ Common Pitfalls

• Passing non-strings — quote expects a string; interpolated multi-word unquoted values can fail.
• Confusing with JS quotes — this is Sass string state for CSS output, not runtime JavaScript.
• Unnecessary quoting — many CSS keywords stay unquoted; quote when the CSS needs a string.
• Forgetting inspect — without meta.inspect, quote state can be hard to see in custom properties.
• Old compilers without modules — use Dart Sass 1.23+ for @use "sass:string".

💡 Best Practices