Generating css variables with scss @each not working

Question

I am working with ionic 4 project and scss. I am having some strange behaviour, while I am trying to create a global CSS variables using @each:

:host {
      $colors-availability: (
        early-day: #e8ab00,
        long-day: #854fa5,
        whole-day: #fe307b,
        all-day: #32773e,
        morning: #87cc93,
        afternoon: #4bb15d,
        late: #fa8072,
        twilight: #40e0d0,
        night: #16151b
      );

      @each $name, $color in $colors-availability {
        --ion-color-#{$name}: $color;
      }
}

This is my code in theme/variables.scss file. I am expecting to have all these variable with respecting colours, but the output is this:

I don't have the hash colour values. Any idea? I tried everything(color() function, etc..). Thanks.

Answer 1

Try something like this as below:

--ion-color-#{$name}: #{$color};