Why Variable interpolation with #{} in SASS? - Purpose & Use Cases

The Big Idea

Discover how a tiny syntax trick can save you hours of repetitive CSS work!

The Scenario

Imagine you want to create multiple CSS classes with similar names but different colors, like .btn-red, .btn-blue, .btn-green, and you write each class manually.

The Problem

Writing each class by hand is slow and boring. If you want to change the color names or add new ones, you must rewrite or copy-paste many lines, risking mistakes and wasting time.

The Solution

Variable interpolation with #{} lets you insert variables inside selectors or property names, so you can write one template and generate many classes automatically.

Before vs After

✗ Before

.btn-red { color: red; }
.btn-blue { color: blue; }

✓ After

$colors: red blue;

@each $color in $colors {
  .btn-#{$color} {
    color: $color;
  }
}

What It Enables

This lets you create flexible, reusable styles that adapt easily when you change variables, saving time and avoiding errors.

Real Life Example

When building a website with many button styles, you can define colors once and generate all button classes dynamically, making updates fast and consistent.

Key Takeaways

Manual CSS duplication is slow and error-prone.

Variable interpolation #{} inserts variables into selectors or properties.

This makes your styles flexible, reusable, and easy to update.