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

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

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

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 */
}

Hint

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

Practice

1. Which of the following is a valid way to define a quoted string in Sass?

easy

A. content: "Hello World";

B. content: Hello World;

C. content: 'Hello World;

D. content: Hello+World;

Solution

1. Step 1: Understand string syntax in Sass

   Strings must be enclosed in matching single or double quotes.

2. Step 2: Check each option for correct quotes

   content: "Hello World"; uses double quotes correctly. content: Hello World; lacks quotes. content: 'Hello World; has unmatched quotes. content: Hello+World; uses plus sign incorrectly.

3. Final Answer:

   content: "Hello World"; -> Option A

4. Quick Check:

   Strings need quotes = D [OK]

Hint: Strings always need matching quotes in Sass [OK]

Common Mistakes:

• Forgetting quotes around strings
• Using unmatched quotes
• Trying to concatenate without operator

2. What is the correct way to join two strings 'Hello' and 'World' in Sass?

easy

A. content: 'Hello' . 'World';

B. content: 'Hello' & 'World';

C. content: 'Hello' - 'World';

D. content: 'Hello' + 'World';

Solution

1. Step 1: Recall Sass string concatenation operator

   Sass uses the plus sign (+) to join strings.

2. Step 2: Verify each option's operator

   content: 'Hello' + 'World'; uses + correctly. Options A, B, D use invalid operators for strings.

3. Final Answer:

   content: 'Hello' + 'World'; -> Option D

4. Quick Check:

   Use + to join strings = C [OK]

Hint: Use + to join strings in Sass [OK]

Common Mistakes:

• Using & or . instead of + for concatenation
• Trying to subtract strings
• Missing quotes around strings

3. What will be the output of this Sass code?

 $greeting: 'Hi';
 $name: 'Alice';
 content: $greeting + ', ' + $name + '!';

medium

A. Hi, Alice!

B. Hi,Alice!

C. Hi , Alice !

D. Hi + ', ' + Alice + '!'

Solution

1. Step 1: Understand string concatenation with variables

   Variables $greeting and $name hold strings. Concatenation joins them with ', ' and '!'.

2. Step 2: Combine strings step-by-step

   'Hi' + ', ' = 'Hi, ' then + 'Alice' = 'Hi, Alice' then + '!' = 'Hi, Alice!'

3. Final Answer:

   Hi, Alice! -> Option A

4. Quick Check:

   Concatenate with + gives 'Hi, Alice!' [OK]

Hint: Add spaces and punctuation as strings when concatenating [OK]

Common Mistakes:

• Forgetting spaces in concatenation
• Treating + as literal text
• Missing quotes around punctuation

4. Identify the error in this Sass code:

 $part1: 'Good';
 $part2: 'Morning';
 content: $part1 + $part2;

medium

A. Using + operator incorrectly

B. Missing space between words in concatenation

C. Variables not declared properly

D. Strings must use double quotes only

Solution

1. Step 1: Check concatenation result

   Concatenating 'Good' + 'Morning' results in 'GoodMorning' without space.

2. Step 2: Identify missing space issue

   To get 'Good Morning', a space string ' ' must be added between variables.

3. Final Answer:

   Missing space between words in concatenation -> Option B

4. Quick Check:

   Concatenation needs spaces explicitly [OK]

Hint: Add ' ' string to insert spaces when joining words [OK]

Common Mistakes:

• Assuming + adds spaces automatically
• Not adding space string between variables
• Confusing syntax errors with logic errors

5. You want to create a dynamic CSS class name by joining 'btn-' with a variable $color that can be 'red' or 'blue'. Which Sass code correctly creates the class name .btn-red or .btn-blue?

hard

A. .btn-{$color} { color: $color; }

B. .btn-" + $color + " { color: $color; }

C. .btn-#{$color} { color: $color; }

D. .btn-" #{$color} " { color: $color; }

Solution

1. Step 1: Understand string interpolation in selectors

   Sass uses #{} to insert variable values inside strings or selectors.

2. Step 2: Check each option's syntax

   .btn-#{$color} { color: $color; } uses .btn-#{$color} which correctly joins 'btn-' and variable. .btn-" + $color + " { color: $color; } uses + which is invalid in selectors. .btn-{$color} { color: $color; } misses #{} so variable won't be replaced. .btn-" #{$color} " { color: $color; } has invalid quotes placement.

3. Final Answer:

   .btn-#{$color} { color: $color; } -> Option C

4. Quick Check:

   Use #{} for variable interpolation in selectors [OK]

Hint: Use #{} to insert variables inside strings/selectors [OK]

Common Mistakes:

• Trying to use + for selector concatenation
• Forgetting #{} for interpolation
• Incorrect quote placement around variables