sass:string module - Mini Project: Build & Apply

Using the Sass String Module to Manipulate Text

📖 Scenario: You are creating a style sheet for a website that needs to display text in a special way. You want to use Sass's string module to change and combine text strings dynamically.

🎯 Goal: Build a Sass stylesheet that uses the string module functions to manipulate text strings and apply the results as CSS content.

📋 What You'll Learn

Use the Sass string module functions

Create variables with exact string values

Concatenate strings using string.concat()

Extract parts of strings using string.slice()

Use the manipulated strings in CSS content properties

💡 Why This Matters

🌍 Real World

Manipulating text strings in Sass helps create dynamic styles, such as custom content or theme-based text changes, without changing HTML.

💼 Career

Knowing how to use Sass modules like string is useful for front-end developers to write cleaner, more maintainable stylesheets that adapt to different content needs.

1

Create initial string variables

Create two string variables called $greeting with the value "Hello" and $name with the value "World".

SASS

// Your code here

Hint

Use $variable-name: "value"; to create string variables.

2

Add a separator variable

Add a string variable called $separator with the value ", " (a comma and a space).

SASS

$greeting: "Hello";
$name: "World";
// Your code here

Hint

Remember to include the comma and space inside quotes.

3

Concatenate strings using string.concat()

Use the Sass string.concat() function to create a new variable called $full-greeting that combines $greeting, $separator, and $name in that order.

SASS

$greeting: "Hello";
$name: "World";
$separator: ", ";
// Your code here

Hint

Import the string module with @use "sass:string"; before using string.concat().

4

Use string.slice() and apply content in CSS

Create a variable called $short-greeting that uses string.slice() to get the first 5 characters of $full-greeting. Then create a CSS rule for p::before that sets the content property to $short-greeting.

SASS

@use "sass:string";

$greeting: "Hello";
$name: "World";
$separator: ", ";

$full-greeting: string.concat($greeting, $separator, $name);
// Your code here

Hint

Remember that string.slice() uses 1-based indexing and the end index is inclusive.