Set CSS Custom Properties using SCSS variables

Is it possible to set custom properties such as ion-content’s “–background” using SCSS variables?

I have tried like this

–ion-background-color: $black-blue;

but it does nothing, where as this works.

border-color: $black-blue;
–ion-background-color: #00BCD4;

The border-color is set to my $black-blue color and the background colour comes through so I know my scss variable is valid

How about this?

ion-content {
  --background: #{$black-blue};

Awesome, thanks so much! How did you know that? I searched the internet and Ionic’s docs.

Searching the internet for #{} and other things that sound like line noise is indeed quite challenging. I think at some point I slogged through the official SASS documentation about interpolation.

1 Like