Sass string.length() Function

What You’ll Learn

string.length() belongs to the built-in sass:string module. It returns how many characters a string has. This page covers empty strings, quoted vs unquoted values, length guards, truncate helpers, and five compiled examples.

What Is string.length()?

Official docs: returns the number of characters in $string. Spaces count. An empty string has length 0.

• Works on quoted and unquoted Sass strings.
• The surrounding quotes are not characters in the value.
• Use it before string.slice when you only want to keep the first n characters.
• Pair with @if for max-length guards on labels and class names.

📝 Syntax

@use "sass:string";

// Recommended
string.length($string)

// Legacy global name
str-length($string)

Parameters

Return value

📦 Loading sass:string

// Recommended — namespaced (Dart Sass 1.23+)
@use "sass:string";
$count: string.length("Helvetica Neue"); // 14

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

// Legacy global
$count: str-length("Helvetica Neue");

🎨 Official Patterns

These are the official Sass documentation samples. Notice both quoted and unquoted inputs are valid strings.

⚖️ Quotes, Spaces & Empty Strings

🛠 Compatibility

This is about Sass compilers, not browsers. Length is computed at compile time.

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

Examples Gallery

Each example uses string.length 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.length("Helvetica Neue"))};
  --unquoted: #{meta.inspect(string.length(bold))};
  --empty: #{meta.inspect(string.length(""))};
}

.probe {
  --quoted: 14;
  --unquoted: 4;
  --empty: 0;
}

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

.compare {
  --a: #{meta.inspect(string.length("Roboto"))};
  --b: #{meta.inspect(string.length(Roboto))};
  --space: #{meta.inspect(string.length("a b"))};
}

.compare {
  --a: 6;
  --b: 6;
  --space: 3;
}

@use "sass:string";

$name: "Helvetica Neue";
$max: 10;

.card {
  @if string.length($name) > $max {
    content: "too-long";
  } @else {
    content: $name;
  }
}

.card {
  content: "too-long";
}

@use "sass:string";

$label: "Save";

.btn::after {
  content: $label;
  // Use length as a ch-based hint for min inline size
  min-inline-size: string.length($label) * 1ch;
}

.btn::after {
  content: "Save";
  min-inline-size: 4ch;
}

@use "sass:string";

@function truncate($text, $max) {
  @if string.length($text) <= $max {
    @return $text;
  }
  @return string.slice($text, 1, $max) + "…";
}

.chip {
  content: truncate("VeryLongLabel", 8);
}

@charset "UTF-8";
.chip {
  content: "VeryLong…";
}

🚀 Real-World Use Cases

• Empty checks — skip rules when string.length($s) == 0.
• Label guards — refuse or shorten names past a max length.
• CSS sizing — multiply length by 1ch for approximate text width.
• Truncate helpers — pair with string.slice for chips and badges.
• Debug tooling — print lengths with meta.inspect while building string APIs.

⚠️ Common Pitfalls

• Confusing with list.length — that counts list items, not string characters.
• Thinking quotes count — "Hi" has length 2, not 4.
• Forgetting spaces — every space adds one to the count.
• Expecting browser runtime — the call never appears in CSS.
• Using bare length() carelessly — prefer string.length to avoid list clashes.

💡 Best Practices