Suggest an edit

Improve this article

Refine the answer for “What is "interpolation" in SCSS?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Interpolation in SCSS is a mechanism for substituting the value of a variable (or expression) inside a string, selector or property name using the `#{$variable}` syntax. It is used in situations where simply using a variable is not possible or would break the syntax.

### What interpolation is for

1. **Creating dynamic selectors**

```scss
  $size: large;

.btn-#{$size} {
    font-size: 20px;
  }
  ```
Result:

```css
  .btn-large {
    font-size: 20px;
  }
  ```
2. **Forming property names**

```scss
  $prop: border;

.box {
    #{$prop}-radius: 10px;
  }
  ```
Result:

```css
  .box {
    border-radius: 10px;
  }
  ```
3. **Inserting variables inside strings**

```scss
  $img: "header";

.block {
    background: url("img/#{$img}.png");
  }
  ```
Result:

```css
  .block {
    background: url("img/header.png");
  }
  ```

**In essence:** interpolation lets you dynamically build CSS code in places where a variable needs to become part of a string, name or selector, not just a property value. It adds flexibility, especially when generating classes, properties or themes of the same type.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts156 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.