Using scss variable inside css variable

Question

Here is the code I am trying

@import "~variables";

:root
{
  --color-primary: map-get($colors, blue);
}

button {
  background: var(--color-primary);
}

in variables I have

$colors: (
        black : #000000,
        white : #FFFFFF,
        blue: : #888888
}

Unfortunately it doesn't work, my buttons aren't blue. As scss is precompiled, I thought that would just work nicely.

what does your compiled code look like? – denns May 07 '20 at 12:50 — denns, May 07 '20 at 12:50
you need `--color-primary: #{map-get($colors, blue)};` – Temani Afif May 07 '20 at 12:51 — Temani Afif, May 07 '20 at 12:51

score 1 · Accepted Answer · answered May 07 '20 at 12:55

you need to escape that scss function like so:

$colors: (
        'black' : #000000,
        'white' : #FFFFFF,
        'blue' : #888888
);

:root {
  --blue: #{map-get($colors, 'blue')}
}

body {
  color: var(--blue);
}

Update: it's basically string interpolation that is needed.

Using scss variable inside css variable

1 Answers1