Variable interpolation with #{} in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is variable interpolation with #{} in Sass?

It is a way to insert the value of a Sass variable directly into a string or selector by wrapping the variable name in #{}. This helps combine variables with text.

beginner

How do you use <code>#{}</code> to create a dynamic class name in Sass?

You write the class name with <code>#{}</code> around the variable, like <code>.btn-#{$color}</code>. If <code>$color</code> is <code>red</code>, the class becomes <code>.btn-red</code>.

intermediate

Why is variable interpolation useful in Sass?

It lets you build selectors, property names, or values dynamically. This means you can reuse code and create styles that change based on variables, making your CSS easier to maintain.

beginner

What happens if you forget to use #{} when combining variables with strings in Sass?

Sass treats the variable as plain text, so the variable name appears literally instead of its value. This breaks the intended dynamic behavior.

intermediate

Show an example of using #{} to create a property name dynamically in Sass.

Example: $side: left; .box { margin-#{$side}: 10px; } outputs .box { margin-left: 10px; }. The property name changes based on $side.

What does #{} do in Sass?

A Inserts the value of a variable into a string or selector

B Comments out code

C Defines a new variable

D Creates a CSS animation

#{} is used for variable interpolation, which means inserting variable values into strings or selectors.

Given $color: blue;, what does .text-#{$color} { color: $color; } compile to?

A .text-blue { color: blue; }

B .text-$color { color: blue; }

C .text-blue { color: $color; }

D .text-$color { color: $color; }

The #{} inserts the value of $color into the class name, and $color is used as the property value.

What happens if you write .btn-$color {} without #{}?

A The class name is empty

B The class name becomes '.btn-blue' if $color is blue

C Sass throws an error

D The class name will literally be '.btn-$color'

Without #{}, Sass treats $color as plain text, not a variable.

Which of these is a valid use of variable interpolation for a property name?

A margin-$side: 10px;

B margin-#{$side}: 10px;

C margin: #{$side} 10px;

D margin: $side 10px;

Only margin-#{$side} correctly uses interpolation to create a dynamic property name.

Why is variable interpolation helpful in Sass?

A It automatically fixes CSS errors

B It speeds up CSS rendering in browsers

C It allows dynamic creation of selectors and properties

D It compresses CSS files

Interpolation helps build CSS dynamically, making styles more flexible and maintainable.

Explain how variable interpolation with #{} works in Sass and why it is useful.

Think about how you can combine text and variables in CSS selectors or properties.

Describe a situation where forgetting to use #{} in Sass causes a problem.

What happens if Sass does not know to replace the variable with its value?

Practice

1. What does the #{} syntax do in Sass?

easy

A. It defines a mixin.

B. It comments out a line of code.

C. It creates a new variable.

D. It inserts the value of a variable inside a string or selector.

Solution

1. Step 1: Understand the purpose of #{} in Sass

   The #{} syntax is used to insert or interpolate variables inside strings or selectors, making styles dynamic.

2. Step 2: Compare with other options

   Commenting, variable creation, and mixin definition use different syntax, so they are incorrect here.

3. Final Answer:

   It inserts the value of a variable inside a string or selector. -> Option D

4. Quick Check:

   #{variable} inserts variable value [OK]

Hint: Remember #{ } means insert variable value inside text [OK]

Common Mistakes:

• Thinking #{ } creates variables
• Confusing interpolation with comments
• Using #{ } to define mixins

2. Which of the following is the correct way to use variable interpolation in a selector in Sass?

easy

A. .button-#{$size} { color: blue; }

B. .button-$size { color: blue; }

C. .button-{$size} { color: blue; }

D. .button-#size { color: blue; }

Solution

1. Step 1: Identify correct interpolation syntax

   Variable interpolation requires #{} around the variable name to insert its value inside selectors.

2. Step 2: Check each option

   .button-#{$size} { color: blue; } uses .#{$size} correctly. Options A, C, and D miss the # or curly braces or both, so they are invalid.

3. Final Answer:

   .button-#{$size} { color: blue; } -> Option A

4. Quick Check:

   Use .class-#{$var} for interpolation [OK]

Hint: Use #{} around variables inside selectors [OK]

Common Mistakes:

• Omitting # in interpolation
• Omitting curly braces {}
• Using $ without interpolation

3. Given the Sass code:

$color: red;
$size: large;

.button-#{$size} {
  color: #{$color};
}

What CSS will this generate?

medium

A. .button-large { color: #{$color}; }

B. .button-#{$size} { color: #{$color}; }

C. .button-large { color: red; }

D. .button-$size { color: red; }

Solution

1. Step 1: Replace variables inside interpolation

   The variable $size is 'large', so .button-#{$size} becomes .button-large. The variable $color is 'red', so color: #{$color} becomes color: red.

2. Step 2: Write the final CSS output

   After interpolation, the CSS is .button-large { color: red; }.

3. Final Answer:

   .button-large { color: red; } -> Option C

4. Quick Check:

   Interpolation replaces variables with values [OK]

Hint: Replace #{} with variable values to get CSS output [OK]

Common Mistakes:

• Leaving interpolation syntax in output
• Not replacing variables correctly
• Confusing variable names with values

4. Identify the error in this Sass code:

$name: "header";

.#$name {
  font-weight: bold;
}

medium

A. Missing interpolation syntax #{ } around $name in selector

B. Variable $name is not defined

C. Font-weight property is invalid

D. Selector cannot start with a dot

Solution

1. Step 1: Check variable usage in selector

   The selector uses .$name but misses #{} for interpolation, so Sass treats it as a literal string, causing an error.

2. Step 2: Correct usage

   It should be .#{$name} to insert the variable value inside the selector.

3. Final Answer:

   Missing interpolation syntax #{ } around $name in selector -> Option A

4. Quick Check:

   Use .#{$var} to interpolate variables in selectors [OK]

Hint: Always wrap variables with #{ } inside selectors [OK]

Common Mistakes:

• Using $var without #{ } in selectors
• Assuming variables work without interpolation
• Confusing property errors with selector errors

5. You want to create CSS classes for button sizes dynamically using Sass variables:

$sizes: small, medium, large;

@each $size in $sizes {
  .btn-#{$size} {
    font-size: if($size == small, 1rem, if($size == medium, 1.5rem, 2rem));
  }
}

What will be the font-size for .btn-large in the generated CSS?

hard

A. 1rem

B. 2rem

C. 1.5rem

D. if($size == small, 1rem, if($size == medium, 1.5rem, 2rem))

Solution

1. Step 1: Understand the loop and condition

   The loop iterates over sizes: small, medium, large. For each, it creates a class with font-size based on the condition.

2. Step 2: Evaluate font-size for large

   For large, the condition $size == small is false, $size == medium is false, so it uses the else value 2rem.

3. Final Answer:

   2rem -> Option B

4. Quick Check:

   Conditional font-size for large = 2rem [OK]

Hint: Check nested if conditions carefully for each variable value [OK]

Common Mistakes:

• Assuming large equals small or medium
• Not evaluating nested if correctly
• Confusing variable interpolation with condition logic