Sass string.slice() Function

What You’ll Learn

string.slice() belongs to the built-in sass:string module. It returns an inclusive substring using 1-based (or negative) indexes. This page covers the default end index, pairing with string.index, truncate helpers, and five compiled examples.

What Is string.slice()?

Official docs: returns the slice of $string starting at index $start-at and ending at index $end-at (both inclusive).

• Indexes are 1-based from the start, or negative from the end.
• Omit $end-at (or pass -1) to keep everything through the last character.
• The original string is not mutated—you get a new string.
• Pair with string.index and string.length for dynamic ranges.

📝 Syntax

@use "sass:string";

// Recommended
string.slice($string, $start-at, $end-at: -1)

// Legacy global name
str-slice($string, $start-at, $end-at: -1)

Parameters

Return value

📦 Loading sass:string

// Recommended — namespaced (Dart Sass 1.23+)
@use "sass:string";
$part: string.slice("Helvetica Neue", 11); // "Neue"

// Optional — bring members into scope
@use "sass:string" as *;
$part: slice("Helvetica Neue", 11);

// Legacy global
$part: str-slice("Helvetica Neue", 11);

🎨 Official Patterns

These are the official Sass documentation samples. The end index is inclusive, and -6 counts from the end of the string.

⚖️ Inclusive Indexes (Not Like JS)

🛠 Compatibility

This is about Sass compilers, not browsers. Slicing happens at compile time.

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

Examples Gallery

Each example uses string.slice at compile time (Dart Sass 1.23+). Open View Compiled CSS for verified output.

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

.probe {
  --from: #{meta.inspect(string.slice("Helvetica Neue", 11))};
  --range: #{meta.inspect(string.slice("Helvetica Neue", 1, 3))};
  --neg: #{meta.inspect(string.slice("Helvetica Neue", 1, -6))};
}

.probe {
  --from: "Neue";
  --range: "Hel";
  --neg: "Helvetica";
}

@use "sass:string";

.heading {
  font-family: string.slice("Helvetica Neue Bold", 1, 14), sans-serif;
}

.heading {
  font-family: "Helvetica Neue", sans-serif;
}

@use "sass:string";

@function first-word($text) {
  $space: string.index($text, " ");
  @if $space == null {
    @return $text;
  }
  @return string.slice($text, 1, $space - 1);
}

.badge {
  content: first-word("Segoe UI");
}

.badge {
  content: "Segoe";
}

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

$file: "logo.dark.svg";
$dot: string.index($file, ".");

.ext {
  --name: #{meta.inspect(string.slice($file, 1, $dot - 1))};
  --ext: #{meta.inspect(string.slice($file, $dot + 1))};
}

.ext {
  --name: "logo";
  --ext: "dark.svg";
}

@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);
}

.chip {
  content: "VeryLong...";
}

🚀 Real-World Use Cases

• Prefixes / suffixes — keep a known head or tail of a token.
• First-word labels — pair with string.index for spaces.
• Path / filename parts — slice around the first separator.
• Truncate chips — combine with string.length for max-width text.
• Font tooling — trim weight words off a family string before CSS emit.

⚠️ Common Pitfalls

• 0-based habits — Sass string indexes start at 1.
• Exclusive-end habits — Sass end indexes are inclusive.
• Forgetting default -1 — omitting the end means “through the last character.”
• First match only — string.index + slice splits on the first separator.
• Expecting mutation — the original string variable stays unchanged.

💡 Best Practices