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.