Strings
Work with quoted and unquoted text and join strings together.
Syntax
@use 'sass:string'; string.to-upper-case("hi")Sass has two kinds of strings: quoted ("Lato") and unquoted (sans-serif). Both are valid; the quotes are preserved in the output when present.
Building strings
Use interpolation #{ } to insert a variable into a string, and the sass:string module for operations like uppercasing or slicing.
Example
@use 'sass:string';
$name: "hero";
.#{$name}-banner {
content: "Section: #{string.to-upper-case($name)}";
}
/* Compiles to:
.hero-banner {
content: "Section: HERO";
}
*/When to use it
- A developer uses string interpolation to build dynamic class names like .icon-arrow inside a loop that iterates over an icon list.
- A mixin accepts an unquoted keyword such as 'bold' for font-weight and passes it directly to the property without needing quotes in the output.
- A team uses sass:string functions to uppercase a design token name when constructing CSS custom property names at compile time.
More examples
Quoted vs unquoted strings
Shows that quoted strings (needing spaces or special chars) and unquoted strings (CSS keywords) both work as Sass variable values.
$font-quoted: 'Helvetica Neue';
$display-value: block; // unquoted
.element {
font-family: $font-quoted;
display: $display-value;
}Interpolation to build selectors
Interpolates the loop variable into both a selector and a URL string to generate icon rules dynamically.
$icons: arrow, close, menu;
@each $name in $icons {
.icon-#{$name}::before {
content: url('/icons/#{$name}.svg');
}
}String manipulation with sass:string
Uses sass:string.to-upper-case() to transform a design token name before inserting it as a CSS custom property name.
@use 'sass:string';
$token: 'primary-action';
$prop: '--color-#{string.to-upper-case($token)}';
:root {
#{$prop}: #2563eb;
}
Discussion