Variable interpolation with #{} in SASS - Mini Project: Build & Apply

Using Variable Interpolation with #{} in Sass

📖 Scenario: You are creating a simple style sheet for a website that has multiple button colors. You want to use Sass variables and variable interpolation to generate CSS classes dynamically.

🎯 Goal: Build a Sass file that uses variable interpolation with #{} to create CSS classes for buttons with different colors.

📋 What You'll Learn

Create a Sass list of color names

Create a variable for the CSS class prefix

Use a @each loop with variable interpolation #{} to generate CSS classes

Add a style rule inside each generated class to set the background color

💡 Why This Matters

🌍 Real World

Variable interpolation helps you write less repetitive CSS by generating classes dynamically, which is useful in theming and design systems.

💼 Career

Front-end developers use Sass and variable interpolation to maintain scalable and maintainable stylesheets in professional web projects.

1

Create a list of colors

Create a Sass list called $colors with these exact values: red, green, and blue.

SASS

# Create a list called $colors with red, green, and blue
# Your code here

Need a hint?

Use parentheses or commas to create a list in Sass, like $list: (item1, item2);.

2

Create a class prefix variable

Create a variable called $btn-prefix and set it to the string btn.

SASS

$colors: (red, green, blue);
# Create a variable $btn-prefix and set it to 'btn'
# Your code here

Need a hint?

Assign a string value to a variable like $var-name: 'value';.

3

Use @each loop with variable interpolation

Write an @each loop that iterates over $colors with the variable $color. Inside the loop, create a CSS class selector using variable interpolation with .#{$btn-prefix}-#{$color}.

SASS

$colors: (red, green, blue);
$btn-prefix: 'btn';
# Write an @each loop over $colors with $color
# Inside, create a class selector using .#{$btn-prefix}-#{$color}
# Your code here

Need a hint?

Use @each $item in $list { ... } and inside use .#{$var} to insert variable values in selectors.

4

Add background color style inside each class

Inside the @each loop, add a CSS property background-color and set it to the current $color variable.

SASS

$colors: (red, green, blue);
$btn-prefix: 'btn';

@each $color in $colors {
  .#{$btn-prefix}-#{$color} {
    // Add background-color: $color;
  }
}

Need a hint?

Inside the selector block, write background-color: $color; to apply the color.