Variable interpolation with #{} in SASS - Deep Dive

Overview - Variable interpolation with #{}

What is it?

Variable interpolation with #{} in Sass lets you insert the value of a variable directly into strings, selectors, or property names. It helps combine variables with other text to create dynamic CSS. This makes your stylesheets more flexible and easier to maintain.

Why it matters

Without interpolation, you would have to write many repetitive CSS rules or manually combine values, which is slow and error-prone. Interpolation lets you build CSS rules that adapt automatically, saving time and reducing mistakes. It makes your stylesheets smarter and more powerful.

Where it fits

Before learning interpolation, you should understand Sass variables and basic syntax. After mastering interpolation, you can explore advanced Sass features like mixins, functions, and loops that often use interpolation for dynamic code.

Mental Model

Core Idea

Interpolation with #{} in Sass is like filling in blanks in a sentence with variable values to create a complete, meaningful CSS rule.

Think of it like...

Imagine writing a letter where you leave blank spaces for names or dates, then later fill those blanks with the right words. Interpolation is like filling those blanks automatically with variables.

Selector or property with interpolation:

  .button-#{size} {
    font-size: #{size}px;
  }

Becomes:

  .button-small {
    font-size: 12px;
  }

Where #{size} is replaced by the variable's value.

Build-Up - 7 Steps

1

Foundation

Understanding Sass Variables Basics

Concept: Learn what Sass variables are and how to use them to store values.

In Sass, you can store values like colors or sizes in variables using $name: value;. For example, $primary-color: #3498db; lets you reuse this color everywhere by writing $primary-color.

Result

You can write $primary-color in your styles and Sass replaces it with #3498db when creating CSS.

Knowing variables lets you avoid repeating the same values and makes your styles easier to update.

2

Foundation

Basic String Usage in Sass

Concept: Understand how strings work in Sass and how they appear in CSS.

Strings in Sass are text inside quotes, like "hello" or 'world'. They can be used for content or property values. Without interpolation, variables inside strings are not replaced automatically.

Result

Writing content: "$primary-color" outputs literally "$primary-color" in CSS, not the color value.

Recognizing that variables inside strings need special handling prepares you for interpolation.

3

Intermediate

Introducing Variable Interpolation Syntax

🤔Before reading on: do you think writing $name inside a string automatically replaces it with the variable's value? Commit to yes or no.

Concept: Learn that #{} is the special syntax to insert variable values inside strings or selectors.

Use #{variable} inside strings or selectors to replace it with the variable's value. For example, content: "Hello #{name}"; will output content: "Hello John" if $name: John;.

Result

The variable value appears inside the string or selector in the final CSS.

Understanding that #{} tells Sass to evaluate and insert the variable value inside text unlocks dynamic styling.

4

Intermediate

Using Interpolation in Selectors

🤔Before reading on: can you use interpolation to create class names dynamically? Commit to yes or no.

Concept: Interpolation can build selectors by combining text and variables.

Example: $size: small; .button-#{$size} { padding: 10px; } This creates a CSS rule for .button-small with padding 10px.

Result

The CSS selector .button-small is generated dynamically using the variable.

Knowing you can create selectors dynamically helps write reusable and scalable styles.

5

Intermediate

Interpolation in Property Names

🤔Before reading on: do you think you can use interpolation to create property names like border-color dynamically? Commit to yes or no.

Concept: Interpolation can also build property names by combining variables and text.

Example: $side: left; $property: border-#{$side}; .element { #{$property}: 1px solid black; } This outputs border-left: 1px solid black; in CSS.

Result

Property names can be dynamic, allowing flexible styling rules.

Understanding this lets you write more generic code that adapts to different cases.

6

Advanced

Interpolation with Complex Expressions

🤔Before reading on: can you put calculations or function calls inside #{}? Commit to yes or no.

Concept: You can use expressions inside #{} to compute values dynamically.

Example: $base: 10px; $multiplier: 2; .element { width: #{ $base * $multiplier }; } This outputs width: 20px; in CSS.

Result

Interpolation evaluates expressions and inserts the result.

Knowing interpolation can handle expressions increases your ability to write powerful, dynamic styles.

7

Expert

Interpolation Pitfalls and Edge Cases

🤔Before reading on: do you think interpolation always outputs strings? Commit to yes or no.

Concept: Interpolation converts values to strings, which can cause unexpected results if not handled carefully.

Example: $number: 10; .content:before { content: #{$number}; } Outputs content: "10"; (a string). If you want a number without quotes, interpolation alone won't do it. Also, interpolation inside selectors must produce valid CSS selectors or errors occur.

Result

Interpolation outputs strings, which can affect CSS behavior if misunderstood.

Understanding interpolation's string conversion prevents bugs and helps write valid CSS.

Under the Hood

Sass processes interpolation by evaluating the expression inside #{} during compilation. It converts the result to a string and inserts it into the surrounding text or selector. This happens before generating the final CSS, allowing dynamic construction of selectors, property names, and values.

Why designed this way?

Interpolation was designed to let developers combine variables and text flexibly without complex syntax. It balances simplicity and power, enabling dynamic CSS generation while keeping Sass code readable and maintainable.

Sass source code with #{} interpolation
          ↓
  Sass compiler evaluates expression inside #{}
          ↓
  Converts result to string
          ↓
  Inserts string into selector/property/value
          ↓
  Outputs final CSS with combined text

Myth Busters - 4 Common Misconceptions

Quick: Does writing $var inside quotes automatically replace it with the variable's value? Commit yes or no.

Common Belief: Variables inside quotes are automatically replaced with their values.

Reality: Variables inside quotes are treated as plain text unless wrapped in #{} for interpolation.

Why it matters: Without interpolation, your CSS will contain literal variable names, causing styles to break or not apply.

Quick: Can interpolation be used anywhere in Sass without restrictions? Commit yes or no.

Common Belief: Interpolation can be used anywhere without causing errors.

Reality: Interpolation must produce valid CSS syntax; invalid results cause compilation errors.

Why it matters: Misusing interpolation can break your build and stop CSS generation, wasting time debugging.

Quick: Does interpolation output raw values like numbers or colors directly? Commit yes or no.

Common Belief: Interpolation outputs raw values exactly as they are (numbers, colors).

Reality: Interpolation converts all values to strings, which may add quotes or change formatting.

Why it matters: Misunderstanding this can cause unexpected CSS output, especially with content or property values.

Quick: Is interpolation only useful for selectors? Commit yes or no.

Common Belief: Interpolation is only for creating dynamic selectors.

Reality: Interpolation is also useful for property names, values, and complex expressions.

Why it matters: Limiting interpolation to selectors reduces your ability to write flexible, reusable styles.

Expert Zone

1

Interpolation can be combined with Sass functions and calculations to create highly dynamic stylesheets that adapt to many conditions.

2

When using interpolation in nested selectors, the output depends on the context, which can lead to subtle bugs if not carefully structured.

3

Interpolation always outputs strings, so when used in content properties, you must manage quotes carefully to avoid invalid CSS.

When NOT to use

Avoid interpolation when static values suffice, as overusing it can make code harder to read and maintain. For complex logic, consider using mixins or functions instead, which provide clearer structure and reusability.

Production Patterns

In production, interpolation is often used to generate utility classes with variable parts (like spacing or color variants), build responsive design selectors, and create dynamic property names for theming systems.

Connections

Template Literals in JavaScript

Both use special syntax to embed variables inside strings dynamically.

Understanding Sass interpolation helps grasp how JavaScript template literals work, enabling dynamic string creation in both CSS and JS.

String Formatting in Python

Both interpolate variables into strings to produce dynamic output.

Knowing Sass interpolation clarifies how Python's f-strings or format method insert variables into text, showing a common pattern across languages.

Natural Language Sentence Construction

Interpolation is like filling blanks in sentences with words to form meaningful statements.

Recognizing this connection helps understand how programming languages build complex outputs from smaller parts, similar to how we form sentences.

Common Pitfalls

#1 Using variables inside quotes without interpolation leads to literal text output.

Wrong approach:

content: "$color";

Correct approach:

content: "#{$color}";

Root cause:

Misunderstanding that variables inside quotes are not replaced unless wrapped in #{}.

#2 Creating invalid selectors by interpolating values that produce illegal CSS names.

Wrong approach:

.btn-#{$size}#{$modifier} { color: red; } // where $modifier might be empty or invalid

Correct approach:

.btn-#{$size}#{if($modifier != null, '-#{$modifier}', '')} { color: red; }

Root cause:

Not validating or conditioning interpolated values before using them in selectors.

#3 Expecting interpolation to output raw numbers without quotes in content property.

Wrong approach:

content: #{$number}; // outputs "10" with quotes

Correct approach:

content: unquote(#{$number}); // removes quotes if needed

Root cause:

Not realizing interpolation converts values to strings, adding quotes in CSS content.

Key Takeaways

Variable interpolation with #{} in Sass lets you insert variable values inside strings, selectors, and property names dynamically.

Interpolation requires wrapping variables or expressions inside #{} to replace them inside text or selectors.

Interpolation always converts values to strings, which can affect CSS output, especially in content properties.

Using interpolation smartly helps create flexible, reusable, and maintainable stylesheets that adapt to different needs.

Misusing interpolation can cause invalid CSS or unexpected output, so understanding its behavior is key to writing robust Sass code.