String types and concatenation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Sass code?

Consider the following Sass code snippet. What will be the value of $result after compilation?

SASS

$part1: "Hello";
$part2: 'World';
$result: $part1 + ' ' + $part2;

A Hello World

B "HelloWorld"

C "Hello World"

D Error: Invalid operation

💡 Hint

Remember how Sass handles string concatenation with the plus (+) operator.

In Sass, the plus (+) operator cannot concatenate strings directly. Using + with strings causes an error. To concatenate strings, you use interpolation or the #{ } syntax.

🧠 Conceptual

intermediate

Which option correctly concatenates two strings in Sass?

You want to join two strings stored in variables $a and $b with a space between them. Which option will work correctly?

SASS

$a: "Good";
$b: "Morning";

A $result: "#{$a} #{$b}";

B $result: $a + ' ' + $b;

C $result: $a $b;

D $result: concat($a, ' ', $b);

💡 Hint

Think about how Sass uses interpolation to combine strings.

Option A uses interpolation with #{ } to combine the variables and a space correctly. Option A causes an error, C is invalid syntax, and D is not a Sass function.

❓ rendering

advanced

What CSS output does this Sass produce?

Given the Sass code below, what will be the rendered CSS for the .greeting class?

SASS

.greeting {
  $hello: "Hello";
  $name: 'Alice';
  content: "#{$hello}, #{$name}!";
}

A

.greeting {
  content: "Hello, Alice!";
}

B

.greeting {
  content: Hello, Alice!;
}

C Syntax error during compilation

D

.greeting {
  content: '#{$hello}, #{$name}!';
}

💡 Hint

Check how interpolation works inside property values.

Interpolation replaces variables with their values inside strings. The output CSS includes the content property with the combined string in quotes.

❓ selector

advanced

Which Sass selector uses string interpolation correctly?

You want to create a class selector with a dynamic part stored in $name. Which option correctly creates a selector like .btn-primary if $name: 'primary'?

SASS

$name: 'primary';

A .btn-'#{$name}' { color: blue; }

B .btn-$name { color: blue; }

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

D .btn-{$name} { color: blue; }

💡 Hint

Remember how to use interpolation in selectors.

Option C uses #{ } to insert the variable value inside the selector correctly. Other options have invalid syntax or quotes that break the selector.

❓ accessibility

expert

How to concatenate strings for ARIA labels in Sass?

You want to create an ARIA label combining a button type and state stored in variables $type and $state. Which Sass code produces aria-label="Submit button active" in the compiled CSS?

SASS

$type: 'Submit';
$state: 'active';

A

button {
  aria-label: $type + ' button ' + $state;
}

B

button {
  aria-label: "#{$type} button #{$state}";
}

C

button {
  aria-label: '#{$type} button #{$state}';
}

D

button {
  aria-label: concat($type, ' button ', $state);
}

💡 Hint

Use interpolation inside double quotes for attribute values.

Option B correctly uses interpolation inside double quotes to produce the desired double-quoted aria-label string. Option B causes an error, C interpolates but produces a single-quoted string in CSS, and D uses a non-existent function.

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