sass:string module

Introduction

The sass:string module helps you work with text in your stylesheets. It lets you change, check, and combine words easily.

You want to join two words or phrases to make a new style name.

You need to check if a color name or keyword is part of a string.

You want to change text to uppercase or lowercase for consistency.

You want to cut a part of a string to use it somewhere else.

You want to count how many characters or words are in a string.

Syntax

SASS

@use 'sass:string';

string.function-name(arguments...)

Always start by loading the module with @use 'sass:string';.

Functions like string.length() or string.uppercase() help you work with text.

Examples

This changes 'hello' to 'HELLO'.

SASS

@use 'sass:string';

$string: string.uppercase('hello');

This counts how many characters are in 'Sass', which is 4.

SASS

@use 'sass:string';

$length: string.length('Sass');

This joins three strings into 'good morning'.

SASS

@use 'sass:string';

$joined: string.join(('good', ' ', 'morning'), '');

This finds where 'world' starts in the string, returning 7.

SASS

@use 'sass:string';

$contains: string.index('hello world', 'world');

Sample Program

This example uses the sass:string module to change text to uppercase, count characters, and join words. The results appear on the page using CSS content property.

SASS

@use 'sass:string';

$greeting: 'hello';
$shout: string.uppercase($greeting);
$length: string.length($greeting);
$full: string.join(($greeting, ' ', 'Sass learner!'), '');

body {
  font-family: Arial, sans-serif;
  padding: 1rem;
}

h1 {
  color: blue;
  content: $shout;
}

p {
  font-size: 1.2rem;
  color: gray;
}

/* Using CSS custom property to show length */
:root {
  --greeting-length: #{$length};
}

footer::after {
  content: 'Length of greeting: ' var(--greeting-length);
  display: block;
  margin-top: 1rem;
  font-style: italic;
  color: darkgreen;
}

/* Show full greeting in a paragraph */
p::before {
  content: "#{$full}";
}

Important Notes

Remember to always @use 'sass:string'; before calling its functions.

Functions return new strings; they do not change the original text.

You can combine these functions to create dynamic and flexible styles.

Summary

The sass:string module helps you work with text in Sass.

Use it to change case, join, find, or measure strings.

It makes your styles smarter and easier to manage.