String types and concatenation in SASS - Mini Project: Build & Apply

String Types and Concatenation in Sass

📖 Scenario: You are creating styles for a website header. You want to use Sass strings to store parts of the header text and then combine them to form the full header title.

🎯 Goal: Build a Sass stylesheet that defines string variables and concatenates them to create a full header title.

📋 What You'll Learn

Use Sass string variables

Concatenate strings using Sass syntax

Assign the concatenated string to a variable

Use the final string in a CSS rule

💡 Why This Matters

🌍 Real World

Web designers often need to combine text parts dynamically in stylesheets for headers, labels, or buttons.

💼 Career

Knowing how to manipulate strings in Sass helps create flexible and maintainable CSS for professional web projects.

1

Create string variables

Create two Sass string variables called $part1 and $part2 with the exact values "Welcome to" and "My Website" respectively.

SASS

# Create two string variables $part1 and $part2 with values "Welcome to" and "My Website"
# Your code here

Need a hint?

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

2

Add a space string variable

Create a Sass string variable called $space with the exact value of a single space character " ".

SASS

$part1: "Welcome to";
$part2: "My Website";
# Create a string variable $space with a single space " "
# Your code here

Need a hint?

Remember to put the space inside quotes to make it a string.

3

Concatenate strings

Create a Sass variable called $full-title that concatenates $part1, $space, and $part2 using the #{} interpolation syntax inside double quotes.

SASS

$part1: "Welcome to";
$part2: "My Website";
$space: " ";
# Create $full-title by concatenating $part1, $space, and $part2 using interpolation
# Your code here

Need a hint?

Use "#{$var1}#{$var2}" to join strings in Sass.

4

Use the concatenated string in CSS

Create a CSS rule for the header element that sets the content property of a ::before pseudo-element to the Sass variable $full-title using interpolation.

SASS

$part1: "Welcome to";
$part2: "My Website";
$space: " ";
$full-title: "#{$part1}#{$space}#{$part2}";

header::before {
  /* Set content to $full-title using interpolation */
  content: ;
  /* Your code here */
}

Need a hint?

Use content: "#{$variable}"; inside the CSS rule to insert the string.