Sass Interpolation

How it works

Interpolation inserts a Sass expression into text such as a selector, property name or custom-property value. Ordinary typed declaration values often need no interpolation. Keep generated names under a deliberate contract; interpolating arbitrary external text is not selector sanitisation.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass interpolation.scss interpolation.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

interpolation.scss

Download interpolation.scss — save at the shown relative path.

$variant: evening;
.screening-#{$variant} {
  padding: 18px;
}
.sample {
  --screening-name: #{$variant};
}

Expected CSS

.screening-evening {
  padding: 18px;
}
.sample {
  --screening-name: evening;
}

The fixed token becomes part of a class name and a custom-property value. The example does not turn a server input into CSS. Quoted strings may lose their quotes when interpolated, so keep quoting explicit when CSS syntax requires it.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.