string.unique-id() returns a randomly generated unquoted string that is a valid CSS identifier and unique within the current Sass compilation. Load with @use "sass:string".
Each call yields a new ID, e.g. uabtrnzug then u6w1b1def—exact characters change every compile.
Store the result once if the same class, keyframe, or ID must appear in more than one place.
Uniqueness is promised for one compilation only. Sample CSS below is illustrative—your output will differ.
@use "sass:string";
string.unique-id() //=> unquoted string (CSS identifier)
string.unique-id(); // e.g. uabtrnzug
string.unique-id(); // e.g. u6w1b1def (different each call)
// Reuse the same ID:
$id: string.unique-id();
.#{$id} { ... }
@keyframes #{$id} { ... }
// Global alias (legacy): unique-id()
// Prefer string.unique-id after @use "sass:string"Pattern: call once → store if needed → interpolate into selectors, keyframes, or custom properties.
When to call again vs keep one value:
| Pattern | Result | Use when |
|---|---|---|
string.unique-id() twice | Two different IDs | Independent names that must not collide |
$id: string.unique-id() | Same ID everywhere you use $id | Keyframe name + animation-name, or class + rule body |
Examples use @use "sass:string". Open View Compiled CSS for verified Dart Sass output from one compile—IDs will differ on your machine.
Two calls produce two unquoted string identifiers.
@use "sass:meta";
@use "sass:string";
.probe {
--a: #{meta.inspect(string.unique-id())};
--b: #{meta.inspect(string.unique-id())};
--type: #{meta.type-of(string.unique-id())};
}string.Interpolate one ID into a class name.
@use "sass:string";
$id: string.unique-id();
.#{$id} {
color: red;
}$id.Assign once so two places share the exact same identifier.
@use "sass:meta";
@use "sass:string";
$id: string.unique-id();
.same {
--x: #{meta.inspect($id)};
--y: #{meta.inspect($id)};
}Compare two fresh IDs in the same compilation.
@use "sass:meta";
@use "sass:string";
$a: string.unique-id();
$b: string.unique-id();
.diff {
--same: #{$a == $b};
--a: #{meta.inspect($a)};
--b: #{meta.inspect($b)};
}false.Avoid animation-name collisions when a mixin is included many times.
@use "sass:string";
@mixin once-keyframe($from, $to) {
$name: string.unique-id();
@keyframes #{$name} {
from { opacity: $from; }
to { opacity: $to; }
}
animation-name: $name;
}
.fade {
@include once-keyframe(0, 1);
}@keyframes to animation-name.Most unique-id bugs are calling twice when you meant to reuse once.
Calling unique-id() again creates a new name—use a variable for keyframe + property pairs.
Do not hard-code sample IDs into tests that expect byte-identical CSS every build.
Ideal for selectors and animation names. Use string.quote only if you truly need a quoted string.
Guaranteed uniqueness is for the current Sass run—not a global UUID across machines or deploys.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
string.unique-id() | Dart Sass 1.23+ via @use "sass:string" |
| Return type | Unquoted string (valid CSS identifier) |
| Arguments | None |
| Legacy global | unique-id() |
Compile with the Dart Sass CLI.
One line: to mint a unique CSS identifier, use string.unique-id().
Practical checklist:
1. @use "sass:string"
2. Call string.unique-id() with no arguments
3. Store in a variable when the same ID must appear twice
4. Interpolate into selectors / @keyframes / animation-name
5. Expect different characters on the next rebuildRemove quotes from a Sass string (use carefully).
8 people found this page helpful