Sass & SCSS Interpolation Guide

Introduction to Sass Interpolation

Sass interpolation helps generate dynamic CSS by combining variables and expressions directly into selectors, properties, and values. This tutorial focuses on practical examples and clear rules for Sass & SCSS interpolation to help you write dynamic maintainable stylesheets.

What is Interpolation in Sass and SCSS?

Interpolation in SCSS or indented Sass allows you to insert variables or expressions directly into selectors, property names, or values, making your stylesheets more flexible and dynamic.

• Interpolation is supported in both Sass and SCSS syntax.
• Uses #{ } to insert variables or expressions.
• Forces values to render as literal text.
• Works in selectors, properties, and values.
• Helps create dynamic class or ID names.
• Useful for building theme and utility styles.

Syntax of Sass Interpolation

Sass interpolation uses #{ } syntax to insert variables or expressions into selectors, property names, or values.

$name: primary;
.button-#{$name} { 
	color: blue; 
}

$name: primary
.button-#{$name}
	color: blue

.button-primary { 
	color: blue; 
}

Benefits of Sass Interpolation

Sass interpolation improves code flexibility and makes stylesheets easier to maintain. With interpolation, we can:

• Create dynamic class and ID names
• Generate property names programmatically
• Build reusable theme and utility styles
• Construct urls and content strings dynamically
• Reduce CSS repetition and clutter
• Support responsive and variant-based designs

Sass Interpolation in Selectors

Sass interpolation in selectors makes it easy to generate dynamic class names and IDs. It helps streamline repetitive patterns, keep code organized, and improve consistency across components, grids, and utility classes.

Sass Variables in Class and ID Names

• Insert variables directly into selectors for dynamic names
• Build consistent and predictable class or ID patterns
• Use loops with interpolation to generate multiple variants
• Keep component states and modifiers uniform across files
• Combine component and state tokens into clean, readable selectors

$component: card;
$states: primary, secondary;

@each $state in $states {
	.#{$component}-#{$state} {
		border: 1px solid #ccc;
		padding: 16px;
	}
}

$component: card
$states: primary, secondary

@each $state in $states
	.#{$component}-#{$state}
		border: 1px solid #ccc
		padding: 16px

.card-primary {
	border: 1px solid #ccc;
	padding: 16px;
}

.card-secondary {
	border: 1px solid #ccc;
	padding: 16px;
}

Sass Interpolation in Property Names

Interpolation can also be applied to CSS property names. This is useful for generating vendor-prefixed properties, logical properties, or utilities based on tokens. It keeps your code flexible and configuration-driven.

Creating Dynamic CSS Properties

• Generate property names directly from Sass variables
• Use interpolation to apply vendor-prefixed or logical properties consistently
• Derive property names from tokens for scalable theme and design systems
• Keep utilities and configuration-driven styles concise and reusable

$dir: left;

.box {
    margin-#{$dir}: 10px;
}

$dir: left

.box
    margin-#{$dir}: 10px

.box {
    margin-left: 10px;
}

Sass Interpolation in Values

Interpolation in values is useful for building URLs, content properties, and combined strings. It ensures variables are inserted correctly into larger strings without breaking syntax.

Variables Inside Strings

• Insert variables inside URLs for images, fonts, or assets
• Use interpolation in content values to output dynamic text
• Avoid unwanted quotes or broken syntax in string values
• Keep file paths, tokens, and theme references consistent
• Build flexible strings that adapt easily to configuration changes

$img-path: "/assets/images";
$theme: dark;

.hero {
    background-image: url("#{$img-path}/#{$theme}/hero-bg.jpg");
    content: "Theme: #{$theme}";
}

$img-path: "/assets/images"
$theme: dark

.hero
    background-image: url("#{$img-path}/#{$theme}/hero-bg.jpg")
    content: "Theme: #{$theme}"

.hero {
    background-image: url("/assets/images/dark/hero-bg.jpg");
    content: "Theme: dark";
}

Sass Interpolation in Mixins and Functions

Interpolation can also be used inside Sass or SCSS mixins and functions to make them more flexible and reusable.

Using Interpolation in Mixins

• Create dynamic class names or utilities from mixin arguments
• Insert variables into property names for flexible output
• Generate multiple variants without repeating code

@mixin spacing($direction, $size) {
    .m-#{$direction}-#{$size} {
        margin-#{$direction}: $size + px;
    }
}

@include spacing(top, 10);
@include spacing(left, 20);

@mixin spacing($direction, $size)
    .m-#{$direction}-#{$size}
        margin-#{$direction}: $size + px

@include spacing(top, 10)
@include spacing(left, 20)

.m-top-10 {
    margin-top: 10px;
}

.m-left-20 {
    margin-left: 20px;
}

Using Interpolation in Functions

• Build dynamic values or property tokens from function arguments
• Return flexible strings or colors that adapt to configuration
• Use with maps and themes for predictable, reusable output

@function theme-asset($folder, $file) {
    @return url("/assets/#{$folder}/#{$file}");
}

.hero {
    background-image: theme-asset("images", "hero.jpg");
}

.icon {
    background-image: theme-asset("icons", "star.svg");
}

@function theme-asset($folder, $file)
    @return url("/assets/#{$folder}/#{$file}")

.hero
    background-image: theme-asset("images", "hero.jpg")

.icon
    background-image: theme-asset("icons", "star.svg")

.hero {
    background-image: url("/assets/images/hero.jpg");
}

.icon {
    background-image: url("/assets/icons/star.svg");
}

Best Practices

Interpolation is a useful feature in Sass, but it works best when applied with purpose. Always document generated patterns so other developers can understand the compiled output.

When to Use and When to Avoid

• Use interpolation for dynamic selectors, property names, or string values
• Avoid it when plain variables or direct values provide the same result
• Prefer maps and mixins for structured and reusable configuration

Common Mistakes to Avoid

• Accidentally quoting values, which turns numbers into strings
• Creating too many generated classes, leading to bloated CSS
• Using interpolation where map lookups would be clearer and more efficient