DEV Community

Cover image for Sass string interpolation
ccsunny
ccsunny

Posted on

Sass string interpolation

#saas #scss #css 
// Sass string interpolation syntax is #{VARIABLE} 
$block: ".MyComponent";

#{$block} {
  &-title {
    #{$block}--xmasTheme & {
    }
  }
}

// Compiles to
.MyComponent {}
.MyComponent-title {}
.MyComponent--xmasTheme .MyComponent-title {}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

jacobandrewsky profile image

Using Tailwind plugins to create custom utility classes

Jakub Andrzejewski -

michaelstamps profile image

How to make a good looking UI

Michael Stamps -

dirheimerb profile image

Implementing Custom Dark Mode with Tailwind CSS: A Complete Guide

Bradley Dirheimer -

ant_f_dev profile image

Change Colours in a Bitmap Image using Browser CSS Filters

Anthony Fung -