Sass string.unquote()

Definition and Usage

string.unquote($string) returns $string as an unquoted Sass string. Already-unquoted input stays unquoted. Load with @use "sass:string".

Syntax

@use "sass:string";

string.unquote($string) //=> unquoted string

string.unquote("Helvetica"); // Helvetica
string.unquote(".widget:hover"); // .widget:hover

// Inject a stored CSS value:
filter: string.unquote("blur(4px)");

// Global alias (legacy): unquote($string)
// Prefer string.unquote after @use "sass:string"

Pattern: start with a quoted string → unquote → emit bare CSS text (identifiers, selectors, function values).

Unquote vs Quote

Same characters, different quote state:

Related Functions

Load with @use "sass:string". Previous: string.unique-id(). Also: string.quote(), meta.inspect(), string.to-lower-case().

SCSS Examples

Examples use @use "sass:string". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).

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

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

.probe {
  --a: Helvetica;
  --b: .widget:hover;
}

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

$q: string.quote(Helvetica);
$u: string.unquote($q);

.compare {
  --quoted: #{meta.inspect($q)};
  --unquoted: #{meta.inspect($u)};
}

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

@use "sass:string";

$family: string.unquote("Roboto");

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

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

@use "sass:string";

#{string.unquote(".widget:hover")} {
  color: blue;
}

.widget:hover {
  color: blue;
}

@use "sass:string";

$blur: string.unquote("blur(4px)");

.card {
  filter: $blur;
}

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

Sass Support

Prefer the module form with current Dart Sass.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:string"
2. Pass a quoted (or already unquoted) string
3. Expect an unquoted result
4. Use for selectors / raw CSS function values
5. Prefer quote() whenever the CSS must stay quoted