Sass string.to-lower-case() Function

What You’ll Learn

string.to-lower-case() belongs to the built-in sass:string module. It returns a copy of a string with ASCII letters converted to lower case. This page covers quote state, Sass vs CSS text-transform, and five compiled examples.

What Is string.to-lower-case()?

Official docs: returns a copy of $string with the ASCII letters converted to lower case.

• The original string is not mutated—you always get a new value.
• Quoted strings stay quoted; unquoted strings stay unquoted.
• Hyphens, digits, and spaces are left alone.
• Pair with string.to-upper-case when you need the opposite.

📝 Syntax

@use "sass:string";

// Recommended
string.to-lower-case($string)

// Legacy global name
to-lower-case($string)

Parameters

Return value

📦 Loading sass:string

// Recommended — namespaced (Dart Sass 1.23+)
@use "sass:string";
$label: string.to-lower-case("Bold"); // "bold"

// Optional — bring members into scope
@use "sass:string" as *;
$label: to-lower-case("Bold");

// Legacy global
$label: to-lower-case("Bold");

🎨 Official Patterns

These are the official Sass documentation samples. Notice the hyphen stays, and quote state matches the input.

⚖️ Sass vs CSS text-transform

🛠 Compatibility

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

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

Examples Gallery

Each example uses string.to-lower-case 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.to-lower-case("Bold"))};
  --unquoted: #{meta.inspect(string.to-lower-case(SANS-SERIF))};
}

.probe {
  --quoted: "bold";
  --unquoted: sans-serif;
}

@use "sass:string";

.heading {
  font-family: string.to-lower-case("ROBOTO"), sans-serif;
  text-transform: none;
}

.heading {
  font-family: "roboto", sans-serif;
  text-transform: none;
}

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

$mod: "PRIMARY";

.btn {
  --mod: #{meta.inspect(string.to-lower-case($mod))};
}

.btn {
  --mod: "primary";
}

@use "sass:string";

@function lower-id($name) {
  @return string.to-lower-case($name);
}

.badge::before {
  content: lower-id("NEW");
}

.badge::before {
  content: "new";
}

@use "sass:string";

$parts: ("SAVE", "EDIT", "DELETE");

@each $part in $parts {
  .action-#{string.to-lower-case($part)} {
    content: string.to-lower-case($part);
  }
}

.action-save {
  content: "save";
}

.action-edit {
  content: "edit";
}

.action-delete {
  content: "delete";
}

🚀 Real-World Use Cases

• Token normalization — force modifiers or flags into a fixed case.
• Generated class names — lowercase segments in BEM-style or utility loops.
• Pseudo-element labels — bake lowercase into content strings.
• Debug props — print lowercase variants with meta.inspect.
• Pair with upper-case — normalize both directions in shared helpers.

⚠️ Common Pitfalls

• Expecting Unicode casing — docs convert ASCII letters; use CSS for display casing of rich text.
• Confusing with text-transform — Sass changes the value; CSS changes display.
• Expecting mutation — the original variable stays unchanged.
• Forgetting quote state — quoted inputs stay quoted in the result.
• Uppercasing for looks only — prefer CSS when you only want visual lowercase.

💡 Best Practices