string.length($string) returns the number of characters in $string. An empty string is 0. Load with @use "sass:string".
length("Helvetica Neue") → 14; length(bold) → 4; length("") → 0.
Quoted and unquoted forms of the same text have the same length. Spaces do count.
Use string.length, not bare length(), so you do not clash with list helpers. Pair with string.slice() for truncating.
@use "sass:string";
string.length($string) //=> number
string.length("Helvetica Neue"); // 14
string.length(bold); // 4
string.length(""); // 0
// Guards:
@if string.length($s) > 10 { ... }
@if string.length($s) == 0 { ... }
// Global alias (legacy): str-length($string)
// Prefer string.length after @use "sass:string"Pattern: pass a string → get a character count → branch, size, or feed into slice/insert.
Quick facts for everyday use:
| Input | Length |
|---|---|
"Helvetica Neue" | 14 (space included) |
bold (unquoted) | 4 |
"" | 0 |
"Roboto" vs Roboto | Both 6 |
Examples use @use "sass:string". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Quoted name, unquoted weight, and empty string.
@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(""))};
}14.0.Quoted and unquoted Roboto both count six characters; spaces still count.
@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"))};
}6."a b" counts.Branch when a label is longer than a limit.
@use "sass:string";
$name: "Helvetica Neue";
$max: 10;
.card {
@if string.length($name) > $max {
content: "too-long";
} @else {
content: $name;
}
}string.length.ch UnitsUse character count to set a minimum inline size.
@use "sass:string";
$label: "Save";
.btn::after {
content: $label;
min-inline-size: string.length($label) * 1ch;
}1ch.Keep the first n characters and append dots when needed.
@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);
}Most length bugs are counting quotes or using bare length().
Quoted and unquoted forms of the same text share a length.
"a b" is length 3.
Use string.length($s) == 0 for empty checks.
Avoid bare length() so you do not clash with list helpers.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
string.length() | Dart Sass 1.23+ via @use "sass:string" |
| Return type | Number (character count) |
| Empty string | 0 |
| Legacy global | str-length($string) |
Compile with the Dart Sass CLI.
One line: to count characters in a string, use string.length($string).
Practical checklist:
1. @use "sass:string"
2. Pass a quoted or unquoted string
3. Expect a character count (empty = 0)
4. Branch with @if on the number
5. Pair with slice / insert for transformsTurn a value into a quoted Sass string.
8 people found this page helpful