Variable interpolation with #{} in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to interpolate the variable $color inside the selector.

SASS

$color: red;
.[1]-text {
  color: $color;
}

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

A#{$color}-text

B#{$color}

Ctext-#{$color}

Dcolor-#{$color}

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use #{} for interpolation.

Placing the variable outside the selector name.

The correct way to interpolate the variable inside the selector name is using #{$color}-text.

2fill in blank

medium

Complete the code to interpolate the variable $size inside the property name.

SASS

$size: large;
.button {
  font-[1]: 2rem;
}

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

Aweight-#{$size}

Bweight#{$size}

Attempts:

3 left

💡 Hint

Common Mistakes

Not using interpolation syntax.

Adding spaces between variable and text.

To interpolate the variable inside the property name, use font-weight-#{$size} syntax.

3fill in blank

hard

Fix the error in the code by correctly interpolating the variable $state inside the selector.

SASS

$state: active;
.button-[1] {
  background: blue;
}

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

A$state

B#{$state}

C#$state

D${state}

Attempts:

3 left

💡 Hint

Common Mistakes

Using $state without interpolation.

Using JavaScript style interpolation like ${state}.

The correct interpolation syntax in Sass is #{$state} to insert the variable value.

4fill in blank

hard

Fill both blanks to interpolate $prefix and $suffix inside the class name.

SASS

$prefix: btn;
$suffix: primary;
.[1]-[2] {
  padding: 1rem;
}

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

A#{$prefix}

B$prefix

C#{$suffix}

D$suffix

Attempts:

3 left

💡 Hint

Common Mistakes

Not interpolating one or both variables.

Using variables without the dollar sign.

Both $prefix and $suffix must be interpolated using #{} inside the selector.

5fill in blank

hard

Fill all three blanks to interpolate $state, $color, and $size inside the selector and property.

SASS

$state: disabled;
$color: gray;
$size: small;
.[1]-button {
  background-[2]: $[3];
}

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

A#{$state}

Bcolor

D#{$color}

E$color

F#{$size}

Gbackground

Hbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong interpolation syntax.

Mixing property names and variable names.

The selector interpolates $state with #{$state}, the property name is color, and the value uses the variable $color.

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