Sass string.unquote() Function

What You’ll Learn

string.unquote() belongs to the built-in sass:string module. It returns a string without Sass quotes so the compiled CSS can emit bare values, filters, or selectors. This page covers the official caution, vs string.quote, and five compiled examples.

What Is string.unquote()?

Official docs: returns $string as an unquoted string. This can produce strings that aren’t valid CSS, so use with caution.

• Strips the Sass quote markers so output CSS has no surrounding ".
• Useful for injecting full CSS fragments you already trust.
• Dangerous with spaces or selector text if you emit them as normal property values.
• Opposite helper: string.quote().

📝 Syntax

@use "sass:string";

// Recommended
string.unquote($string)

// Legacy global name
unquote($string)

Parameters

Return value

📦 Loading sass:string

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

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

// Legacy global
$name: unquote("Helvetica");

🎨 Official Patterns

These are the official Sass documentation samples. The second result is selector-shaped text—safe when interpolated into a selector, not as a normal property value.

⚖️ quote vs unquote

🛠 Compatibility

This is about Sass compilers, not browsers. Quote state is resolved at compile time.

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

Examples Gallery

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

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

.probe {
  --quoted: #{meta.inspect(string.unquote("Helvetica"))};
  --selector: #{meta.inspect(string.unquote(".widget:hover"))};
}

.probe {
  --quoted: Helvetica;
  --selector: .widget:hover;
}

@use "sass:string";

.heading {
  font-family: string.unquote("Roboto"), sans-serif;
}

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

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

$family: "Segoe UI";

.compare {
  --kept: #{meta.inspect($family)};
  --bare: #{meta.inspect(string.unquote($family))};
}

.compare {
  --kept: "Segoe UI";
  --bare: Segoe UI;
}

@use "sass:string";

@mixin inject-filter($value) {
  filter: string.unquote($value);
}

.card {
  @include inject-filter("blur(4px)");
}

.card {
  filter: blur(4px);
}

@use "sass:string";

$sel: string.unquote(".btn:focus-visible");

#{$sel} {
  outline: 2px solid currentColor;
}

.btn:focus-visible {
  outline: 2px solid currentColor;
}

🚀 Real-World Use Cases

• CSS value injection — emit filter, transform, or similar fragments from strings.
• Dynamic selectors — unquote then interpolate into a rule head.
• API boundaries — accept quoted config strings and emit bare CSS tokens.
• Debugging quote state — pair with meta.inspect to see before/after.
• Opposite of quote — normalize values that must not keep CSS quotes.

⚠️ Common Pitfalls

• Invalid CSS — official docs warn unquote can emit unparsable values.
• Spaced font names — keep quotes with string.quote instead.
• Selector as a property value — interpolate selectors; do not dump them into props.
• Confusing with CSS — browsers never see unquote().
• Forgetting the opposite — use string.quote when quotes are required.

💡 Best Practices