string.to-upper-case($string) returns a copy of $string with ASCII letters converted to upper case. Quote state is preserved. Load with @use "sass:string".
string.to-upper-case("Bold") is "BOLD"; string.to-upper-case(sans-serif) is SANS-SERIF.
Useful for badges, constants, and forced-uppercase tokens when source casing varies.
Sass changes the string in the stylesheet. text-transform: uppercase only changes how the browser paints text.
@use "sass:string";
string.to-upper-case($string) //=> string
string.to-upper-case("Bold"); // "BOLD"
string.to-upper-case(sans-serif); // SANS-SERIF
// Global alias (legacy): to-upper-case($string)
// Prefer string.to-upper-case after @use "sass:string"Pattern: pass mixed-case text → get ASCII-uppercased copy → keep the same quote state.
Same characters, opposite case helpers:
| Helper | Typical result | Use when |
|---|---|---|
string.to-upper-case | "BOLD" / SANS-SERIF | Force uppercase labels or constants |
string.to-lower-case | "bold" / sans-serif | Normalize tokens and class names |
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 uppercase ASCII letters.
@use "sass:meta";
@use "sass:string";
.probe {
--a: #{meta.inspect(string.to-upper-case("Bold"))};
--b: #{meta.inspect(string.to-upper-case(sans-serif))};
}"Bold" becomes "BOLD".sans-serif stays unquoted.Uppercase a badge string for CSS content.
@use "sass:string";
.badge {
text-transform: none;
content: string.to-upper-case("new");
}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-upper-case("bold"))};
--from-unquoted: #{meta.inspect(string.to-upper-case(bold))};
}Keep lowercase class slugs while emitting uppercase content.
@use "sass:string";
$names: "primary", "Accent", "MUTED";
@each $name in $names {
.chip-#{string.to-lower-case($name)} {
content: string.to-upper-case($name);
}
}content.Most uppercase 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-upper-case() | Dart Sass 1.23+ via @use "sass:string" |
| Return type | String (same quote state as input) |
| Scope | ASCII letters only |
| Legacy global | to-upper-case($string) |
Compile with the Dart Sass CLI.
One line: to uppercase ASCII letters in a Sass string, use string.to-upper-case($string).
Practical checklist:
1. @use "sass:string"
2. Pass quoted or unquoted input
3. Expect ASCII letters uppercased
4. Remember quote state is unchanged
5. Use quote() when CSS content needs quotesGenerate a unique unquoted CSS identifier per compilation.
8 people found this page helpful