Sass Interpolation — Dynamic Selectors and Property Names

In this tutorial, you will learn about Sass Interpolation. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass interpolation #{} embeds variable values and expressions into selectors, property names, CSS strings, and media queries for dynamic style generation.

What You'll Learn

You will learn how to use interpolation for dynamic selectors, property names, string values, media queries, and combined with loops for utility generation.

Why It Matters

Interpolation powers dynamic CSS generation. DodaTech uses interpolation in all loops to generate utility classes and component variants from configuration data.

Real-World Use

Durga Antivirus Pro's dashboard generates complete responsive utility classes using interpolation with loop variables in selector names and media queries.

flowchart LR
    A[Loops] --> B[Interpolation]
    B --> C[Selectors]
    B --> D[Properties]
    B --> E[Strings]
    B --> F[Media Queries]
    style B fill:#c69,stroke:#c69,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Selector Interpolation

$component: "card";
$modifier: "featured";

.#{$component} {
  background: white;
  border-radius: 8px;
}

.#{$component}--#{$modifier} {
  border: 2px solid gold;
}

Expected output: .card and .card--featured classes.

Property Name Interpolation

$property: "margin";
$direction: "left";
$value: 1rem;

.element {
  #{$property}-#{$direction}: $value;
}

// Multiple interpolated parts
$prefix: "webkit";
$prop: "transform";

.custom {
  -#{$prefix}-#{$prop}: rotate(45deg);
  #{$prop}: rotate(45deg);
}

Expected output: Dynamic property names from variables.

String Interpolation

$name: "DodaTech";
$version: "5.2";

.brand::before {
  content: "#{$name} v#{$version}";
}

.alert::after {
  content: "Version: #{$version} — Check for updates.";
}

Expected output: Generated content strings with variable values inserted.

Interpolation in Media Queries

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
);

@each $name, $value in $breakpoints {
  @media (min-width: #{$value}) {
    .hide-#{$name} {
      display: none;
    }
  }
}

Expected output: Media query breakpoints generated dynamically from a map.

Interpolation with Calculations

$base-font: 1rem;
$scale: 1.25;

@for $i from 1 through 6 {
  h#{$i} {
    font-size: #{$base-font * pow($scale, 6 - $i)};
  }
}

Expected output: Heading sizes h1 through h6 calculated from a modular scale.

URL Interpolation

$image-path: "/assets/images/";
$icon: "search";

.icon-#{$icon} {
  background-image: url("#{$image-path}#{$icon}.svg");
}

Expected output: Dynamic URL construction for asset paths.

Combined with Loops

$spacing-scale: (0, 1, 2, 3, 4, 5);
$sides: (
  t: "top",
  b: "bottom",
  s: "left",
  e: "right",
);

@each $prefix, $side in $sides {
  @each $size in $spacing-scale {
    .m#{$prefix}-#{$size} {
      margin-#{$side}: $size * 0.25rem;
    }
    .p#{$prefix}-#{$size} {
      padding-#{$side}: $size * 0.25rem;
    }
  }
}

Expected output: Complete spacing utility system with side-specific classes.

Attribute Selectors

$states: ("active", "disabled", "hover");

@each $state in $states {
  [data-state="#{$state}"] {
    @if $state == "disabled" {
      opacity: 0.5;
      cursor: not-allowed;
    } @else if $state == "active" {
      border-color: #7c3aed;
    }
  }
}

Expected output: Dynamic attribute selectors from a list of states.

Common Mistakes

1. Extra Spaces in Interpolation

.#{ $var } adds a space, creating . card (invalid selector). Use .#{$var} without spaces.

2. Interpolation Outside Strings

Interpolation inside selectors and property values does not need quotes. Use #{$var} directly.

3. Quoting Numbers Incorrectly

#{$value}px works when $value is a number. If $value has a unit, #{$value} includes it.

4. Forgetting Interpolation in calc()

CSS calc() with Sass variables needs interpolation: calc(100% - #{$sidebar-width}).

5. Interpolation in Comments

Interpolation does not work inside CSS comments. Use plain text.

Practice Questions

1. What syntax embeds a variable in a selector? #{$variable} in selectors like .#{$name} { ... }.

2. Can interpolation be used in property names? Yes: #{$property}: value; compiles to the dynamic property name.

3. How do you use interpolation in calc()? calc(100% - #{$width}) interpolates the Sass variable.

4. Can interpolation create multiple selectors? Combine with loops: @each $name in list { .#{$name} { ... } }.

5. How do you avoid spaces in interpolated selectors? Do not put spaces inside #{}: .#{$var} not .#{ $var }.

Challenge

Create a dynamic component system using interpolation. Given a map of component configurations (button, card, badge, alert), generate complete CSS for each with interpolated selectors, property names, and values.

FAQ

Mini Project

Build a theme color utility generator using interpolation and loops. Given a map of color names and hex values, generate text-color, background-color, border-color, and hover states for each color using interpolation for all selectors and property names.

What's Next

Learn the 7-1 Pattern for architecting large stylesheets. Then build the Sass Project to apply everything.