String types and concatenation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are the two main types of strings in Sass?

Sass has quoted strings (wrapped in single or double quotes) and unquoted strings (without quotes).

beginner

How do you concatenate strings in Sass?

Use the #{} interpolation syntax inside strings or simply place strings next to each other with interpolation to join them.

intermediate

What happens if you concatenate a quoted string with an unquoted string in Sass?

The result is a quoted string that combines both parts, preserving the quotes.

beginner

Show an example of string interpolation in Sass.

Example: $name: "world"; .hello { content: "Hello, #{$name}!"; } outputs Hello, world! in CSS.

beginner

Why is string interpolation useful in Sass?

It lets you insert variables or expressions inside strings, making styles dynamic and easier to maintain.

Which of these is a quoted string in Sass?

A true

B Hello

C 123

D "Hello"

Quoted strings are wrapped in quotes like "Hello".

How do you combine two strings in Sass?

A Using #{ } interpolation

B Using + operator

C Using & operator

D Using * operator

Sass uses #{ } interpolation to join strings.

What will this Sass code output? $greet: "Hi"; content: "#{$greet} there!";

A Hi#{$greet} there!

B Hi there!

C #{$greet} there!

D Hi# there!

Interpolation replaces #{$greet} with the variable value "Hi".

If you concatenate a quoted string and an unquoted string, what type is the result?

A Quoted string

B Unquoted string

C Number

D Boolean

The result keeps quotes, so it is a quoted string.

Which Sass feature allows inserting variables inside strings?

A Mixins

B Functions

C Interpolation

D Nesting

Interpolation (#{}) inserts variables inside strings.

Explain the difference between quoted and unquoted strings in Sass and how you can combine them.

Think about how quotes affect the string and how #{ } helps join strings.

Describe how string interpolation works in Sass and why it is useful for styling.

Remember the #{ } syntax inside strings.

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