string.to-lower-case($string) returns a copy of $string with ASCII letters converted to lower case. Quote state is preserved. Load with @use "sass:string".
string.to-lower-case("Bold") is "bold"; string.to-lower-case(SANS-SERIF) is sans-serif.
Useful for class names, design tokens, and map keys when input casing is mixed.
Sass changes the string in the stylesheet. text-transform: lowercase only changes how the browser paints text.
@use "sass:string";
string.to-lower-case($string) //=> string
string.to-lower-case("Bold"); // "bold"
string.to-lower-case(SANS-SERIF); // sans-serif
// Global alias (legacy): to-lower-case($string)
// Prefer string.to-lower-case after @use "sass:string"Pattern: pass mixed-case text → get ASCII-lowercased copy → keep the same quote state.
Same characters, opposite case helpers:
| Helper | Typical result | Use when |
|---|---|---|
string.to-lower-case | "bold" / sans-serif | Normalize tokens and class names |
string.to-upper-case | "BOLD" / SANS-SERIF | Force uppercase labels or constants |
Examples use @use "sass:string". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Quoted and unquoted inputs both lowercase ASCII letters.
@use "sass:meta";
@use "sass:string";
.probe {
--a: #{meta.inspect(string.to-lower-case("Bold"))};
--b: #{meta.inspect(string.to-lower-case(SANS-SERIF))};
}"Bold" becomes "bold".SANS-SERIF stays unquoted.Lowercase a design-token string for CSS content.
@use "sass:string";
.btn {
text-transform: none;
content: string.to-lower-case("PRIMARY");
}content.Same mixed-case source, both directions.
@use "sass:meta";
@use "sass:string";
$raw: "MiXeD Case";
$lower: string.to-lower-case($raw);
$upper: string.to-upper-case($raw);
.compare {
--lower: #{meta.inspect($lower)};
--upper: #{meta.inspect($upper)};
}Quoted stays quoted; unquoted stays unquoted.
@use "sass:meta";
@use "sass:string";
.class-name {
--from-quoted: #{meta.inspect(string.to-lower-case("BOLD"))};
--from-unquoted: #{meta.inspect(string.to-lower-case(BOLD))};
}Normalize mixed-case tokens into CSS class selectors.
@use "sass:string";
$names: "PRIMARY", "Accent", "muted";
@each $name in $names {
.chip-#{string.to-lower-case($name)} {
content: string.to-lower-case($name);
}
}content.Most lowercase bugs are ASCII-only expectations or quote-state mix-ups.
Digits, hyphens, spaces, and most non-ASCII letters stay as written.
Unquoted input stays unquoted—pair with string.quote when CSS needs quotes.
Use CSS text-transform when the visible text must change without rewriting the stylesheet string.
meta.inspect shows whether the result is quoted.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
string.to-lower-case() | Dart Sass 1.23+ via @use "sass:string" |
| Return type | String (same quote state as input) |
| Scope | ASCII letters only |
| Legacy global | to-lower-case($string) |
Compile with the Dart Sass CLI.
One line: to lowercase ASCII letters in a Sass string, use string.to-lower-case($string).
Practical checklist:
1. @use "sass:string"
2. Pass quoted or unquoted input
3. Expect ASCII letters lowercased
4. Remember quote state is unchanged
5. Use quote() when CSS content needs quotesConvert ASCII letters in a string to upper case.
8 people found this page helpful