Sass string.unique-id() Function

What You’ll Learn

string.unique-id() belongs to the built-in sass:string module. It invents a random, unquoted CSS identifier that is unique for the current compilation. This page covers reusing IDs with variables, animation names, mixins, and five compiled examples.

What Is string.unique-id()?

Official docs: returns a randomly generated unquoted string that is guaranteed to be a valid CSS identifier and to be unique within the current Sass compilation.

• Takes no arguments—just call string.unique-id().
• Each call creates a new identifier.
• Save it in a variable when animation names, IDs, or classes must match.
• Values can change when you recompile—sample CSS below is illustrative.

📝 Syntax

@use "sass:string";

// Recommended
string.unique-id()

// Legacy global name
unique-id()

Parameters

Return value

📦 Loading sass:string

// Recommended — namespaced (Dart Sass 1.23+)
@use "sass:string";
$id: string.unique-id(); // e.g. uiu6815

// Optional — bring members into scope
@use "sass:string" as *;
$id: unique-id();

// Legacy global
$id: unique-id();

🎨 Official Patterns

Official Sass docs show two different identifiers from two calls. Your values will look similar (often starting with u) but will not match these samples exactly.

⚖️ Call Twice vs Store Once

🛠 Compatibility

This is about Sass compilers, not browsers. The identifier is created at compile time and ships as plain CSS text.

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

Examples Gallery

Each example uses string.unique-id at compile time (Dart Sass 1.23+). Open View Compiled CSS for a sample output—your IDs will differ on rebuild.

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

.probe {
  --a: #{meta.inspect(string.unique-id())};
  --b: #{meta.inspect(string.unique-id())};
}

.probe {
  --a: uiu6815;
  --b: uiu681s;
}

@use "sass:string";

$anim: string.unique-id();

.loader {
  animation-name: $anim;
}

@keyframes #{$anim} {
  from { opacity: 0; }
  to { opacity: 1; }
}

.loader {
  animation-name: u4pmoi2;
}

@keyframes u4pmoi2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@use "sass:string";

$id: string.unique-id();

.panel {
  --scope: #{$id};
}

##{$id} {
  scroll-margin-top: 4rem;
}

.panel {
  --scope: uyimun3;
}

#uyimun3 {
  scroll-margin-top: 4rem;
}

@use "sass:string";

@mixin once-class {
  $name: string.unique-id();
  .#{$name} {
    @content;
  }
}

@include once-class {
  display: grid;
}

.ufodjfk {
  display: grid;
}

@use "sass:list";
@use "sass:string";

$ids: ();
@for $i from 1 through 3 {
  $ids: list.append($ids, string.unique-id());
}

.box {
  --id-1: #{list.nth($ids, 1)};
  --id-2: #{list.nth($ids, 2)};
  --id-3: #{list.nth($ids, 3)};
}

.box {
  --id-1: u93flzv;
  --id-2: u93fm0a;
  --id-3: u93fm12;
}

🚀 Real-World Use Cases

• Keyframe names — avoid collisions when many mixins emit animations.
• Generated classes — one-off utility wrappers from mixins.
• Fragment IDs — unique #id selectors for skip links or anchors.
• Scoped tokens — put unique strings into custom properties for JS.
• Test fixtures — invent throwaway identifiers while prototyping.

⚠️ Common Pitfalls

• Calling twice by accident — animation and keyframes will not match.
• Expecting stable IDs across builds — uniqueness is per compilation.
• Thinking it is a browser API — the call never appears in CSS.
• Expecting quoted output — results are unquoted identifiers.
• Using it for secrets — these are CSS names, not cryptographic tokens.

💡 Best Practices