Set CSS Custom Properties using SCSS variables

Ionic Framework
1

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

I have tried like this

ion-content{
–ion-background-color: $black-blue;
}

but it does nothing, where as this works.

ion-content{
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

2

How about this?

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

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

4

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