String types and concatenation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a string variable named $greeting with the value Hello.

SASS

$greeting: [1];

Drag options to blanks, or click blank then click option'

A"Hello"

BHello

CHello;

D'Hello'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use quotes around the string value.

Using unquoted text which Sass treats as identifiers.

In Sass, strings can be defined using single quotes. Here, 'Hello' correctly defines a string value.

2fill in blank

medium

Complete the code to concatenate two strings $first and $second into $full.

SASS

$full: $first [1] $second;

Drag options to blanks, or click blank then click option'

A+

Bconcat

C+=

Attempts:

3 left

💡 Hint

Common Mistakes

Using concat which is not a Sass operator.

Using += which is not valid in Sass.

In Sass, the + operator concatenates strings. So $first + $second joins the two strings.

3fill in blank

hard

Fix the error in the code to concatenate $name and $title with a space between.

SASS

$label: $name [1] " " [1] $title;

Drag options to blanks, or click blank then click option'

A,

B+

C&

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas which separate arguments but do not concatenate.

Using & or - which are not string concatenation operators.

Use the plus sign + to concatenate strings and include a space string " " between them.

4fill in blank

hard

Fill both blanks to create a string map where keys are names and values are titles concatenated with a colon and space.

SASS

$people: ("Alice": $alice[1] ": " [2] $title-alice, "Bob": $bob[1] ": " [2] $title-bob);

Drag options to blanks, or click blank then click option'

A+

B,

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas which separate items but do not concatenate strings.

Using minus or other operators that cause errors.

Use + to concatenate strings. Both blanks need the plus operator to join the parts.

5fill in blank

hard

Fill all three blanks to create a nested map with concatenated string keys and values.

SASS

$data: ("user-"[1]: ("name": $user[2] " " [3] $lastname));

Drag options to blanks, or click blank then click option'

A+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using minus or other invalid operators.

Forgetting to concatenate the space between first and last names.

Use the plus sign + to concatenate strings in all blanks for keys and values.

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