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.