string.slice($string, $start-at, $end-at: -1) returns the slice of $string from index $start-at through $end-at (both inclusive). Indexes are 1-based. Load with @use "sass:string".
string.slice("Helvetica Neue", 11) is "Neue"; string.slice("Helvetica Neue", 1, 3) is "Hel".
$end-at defaults to -1 (last character), so omitting it slices from the start index to the end.
JavaScript’s String#slice uses a half-open end. Sass includes both ends—plan indexes accordingly.
@use "sass:string";
string.slice($string, $start-at, $end-at: -1) //=> string
string.slice("Helvetica Neue", 11); // "Neue"
string.slice("Helvetica Neue", 1, 3); // "Hel"
string.slice("Helvetica Neue", 1, -6); // "Helvetica"
// Global alias (legacy): str-slice($string, $start-at, $end-at: -1)
// Prefer string.slice after @use "sass:string"Pattern: pick start → pick end (or keep default) → get an inclusive substring.
How start and end indexes are read:
| Index | Behavior |
|---|---|
Positive (e.g. 1, 11) | Count from the start; 1 is the first character |
Negative (e.g. -1, -6) | Count from the end; -1 is the last character |
Default $end-at | -1 — slice through the last character |
| Both ends | Inclusive (unlike JS half-open slice) |
Examples use @use "sass:string". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Start-only, inclusive range, and a negative end index.
@use "sass:meta";
@use "sass:string";
.probe {
--a: #{meta.inspect(string.slice("Helvetica Neue", 11))};
--b: #{meta.inspect(string.slice("Helvetica Neue", 1, 3))};
--c: #{meta.inspect(string.slice("Helvetica Neue", 1, -6))};
}"Neue"."Hel".Omit $end-at to take everything from a start index onward.
@use "sass:string";
.tail {
content: string.slice("Helvetica Neue", 11);
}-1.N.Count backward from the end to drop a trailing segment.
@use "sass:string";
.head {
content: string.slice("Helvetica Neue", 1, -6);
}string.indexFind a delimiter, then cut the left and right parts.
@use "sass:meta";
@use "sass:string";
$name: "Helvetica Neue";
$at: string.index($name, " ");
$family: string.slice($name, 1, $at - 1);
$weight: string.slice($name, $at + 1);
.split {
--family: #{meta.inspect($family)};
--weight: #{meta.inspect($weight)};
}Cap a string at $max characters and append "...".
@use "sass:string";
@mixin truncate($text, $max) {
@if string.length($text) > $max {
content: string.slice($text, 1, $max) + "...";
} @else {
content: $text;
}
}
.card {
@include truncate("Helvetica Neue", 9);
}if().Most slice bugs are off-by-one or JS-style half-open ends.
1, 3 keeps three characters—not a half-open JS range.
Same indexing as string.index and string.insert.
If string.index returns null, do not feed it into slice—branch with @if first.
Slicing a quoted string keeps a quoted result; use meta.inspect when debugging.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
string.slice() | Dart Sass 1.23+ via @use "sass:string" |
| Return type | String (same quote state as input) |
| Indexes | 1-based; both ends inclusive; default end -1 |
| Legacy global | str-slice($string, $start-at, $end-at: -1) |
Compile with the Dart Sass CLI.
One line: to cut an inclusive substring, use string.slice($string, $start-at, $end-at).
Practical checklist:
1. @use "sass:string"
2. Remember indexes are 1-based and inclusive
3. Omit $end-at to slice through the last character
4. Use negative indexes to count from the end
5. Pair with string.index / string.length for real workflowsSplit a string on a separator into a bracketed list.
8 people found this page helpful