Using scss variable inside css variable [duplicate]

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
– denns

2020-05-07 12:50:59 +00:00
Commented May 7, 2020 at 12:50 — denns
– denns, Commented May 7, 2020 at 12:50
you need --color-primary: #{map-get($colors, blue)};

Temani Afif
– Temani Afif

2020-05-07 12:51:14 +00:00
Commented May 7, 2020 at 12:51 — Temani Afif
– Temani Afif, Commented May 7, 2020 at 12:51

denns · Accepted Answer · 2020-05-07 12:55:32Z

1

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.

answered May 7, 2020 at 12:55

denns

1,1511 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using scss variable inside css variable [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related