Can I use global variables inside CSS proprety

Question

I know this works left: var(--mouse-x); you can update this values using JS which it's my goal here. My situation is a bit different, see I am trying to create an animation and I need to dynamically changes values in this line

clip-path: polygon(var(clip1) 0, 100% 1%, 100% 100%, 50% 100%);

Here's my attempt

 let root = document.documentElement;
 root.style.setProperty('clip1', e.clientY + "%");

The error is values are not set maybe because that variable is nested right there. Any suggestion?

it's should be `--clip1`.The naming convention is important – Temani Afif Jun 15 '19 at 20:16 — Temani Afif, Jun 15 '19 at 20:16
That's right, totally forget naming! thank you – Jun 15 '19 at 20:19 — , Jun 15 '19 at 20:19

score 0 · Answer 1 · answered Jun 15 '19 at 21:24

0

Should be:

clip-path: polygon(var(--clip1) 0, 100% 1%, 100% 100%, 50% 100%);

Look here:

Creating CSS Global Variables : Stylesheet theme management

answered Jun 15 '19 at 21:24

Umbro

1,984
12
40
99

Can I use global variables inside CSS proprety

1 Answers1