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.