Variable interpolation with #{} in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code using interpolation?

Given the Sass code below, what will be the compiled CSS output?

SASS

$color: red;

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

A

.button-#color {
  background-color: red;
}

B

.button-#{$color} {
  background-color: red;
}

C

.button-red {
  background-color: $color;
}

D

.button-red {
  background-color: red;
}

💡 Hint

Interpolation replaces #{} with the variable's value inside selectors or property names.

The #{$color} inside the selector is replaced by the value of $color, which is 'red'. The property value uses $color directly, so it compiles to 'red'.

❓ rendering

intermediate

What color will the button have in the browser?

Consider this Sass code. What color will the button have when rendered in the browser?

SASS

$btn-color: blue;

.btn-#{$btn-color} {
  color: $btn-color;
}

A Green text color on the button

B No color applied, default text color

C Blue text color on the button

D Red text color on the button

💡 Hint

The variable $btn-color is set to blue and used both in selector and property.

The variable $btn-color is blue, so the selector becomes .btn-blue and the color property is blue, so the button text color is blue.

🧠 Conceptual

advanced

Why use #{} interpolation in Sass selectors?

Which reason best explains why #{} interpolation is used in Sass selectors?

A To import external CSS files

B To insert variable values dynamically into selectors or property names

C To create loops inside selectors

D To comment out code inside selectors

💡 Hint

Think about how variables can change parts of selectors.

Interpolation with #{} allows Sass to replace variables with their values inside selectors or property names, enabling dynamic CSS generation.

❓ selector

advanced

What selector does this Sass code produce?

Given the Sass code below, what is the exact CSS selector generated after compilation?

SASS

$state: active;

.menu-item-#{$state} {
  font-weight: bold;
}

A .menu-item-active

B .menu-item-#{$state}

C .menu-item-state

D .menu-item-$state

💡 Hint

Interpolation replaces #{$state} with the variable's value.

The variable $state is 'active', so the selector becomes '.menu-item-active'.

❓ accessibility

expert

How can interpolation help with accessible ARIA attributes in Sass?

You want to create multiple buttons with different ARIA labels using Sass variables and interpolation. Which Sass code correctly sets unique ARIA labels using interpolation?

A

$label: submit;
button[aria-label="#{$label}"] {
  background: green;
}

B

$label: submit;
button[aria-label=$label] {
  background: green;
}

C

$label: submit;
button[aria-label='label'] {
  background: green;
}

D

$label: submit;
button[aria-label=#{label}] {
  background: green;
}

💡 Hint

Attribute selectors need the variable value as a string inside quotes with interpolation.

Interpolation with #{} inside quotes inserts the variable value correctly in the attribute selector. Option A uses this correctly.

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