how to calculate css custom variables? calc(percentage * percentage)

Asked Jan 02 '21 at 08:28

Active Jan 02 '21 at 08:28

Viewed 11 times

I tried to calculate some css variables. But I've a problem with calc(percentage * percentage). It seem a problem with percentage multiplied by percentage.

  --test: 30%;
  --test2: 50%;
  background: hsl(
    10deg,
    40%,
    calc( 50% * var(--test) / var(test2) ) // doesn't work
  );

background: hsl(
    10deg,
    40%,
    calc( 50% * 1 ) // works
  );

  background: hsl(
    10deg,
    40%,
    calc( 50% * 100% ) // doesn't work
  );

  background: hsl(
    10deg,
    40%,
    calc( 50% * (100% / 100%) ) // doesn't work too
  );

Anyone can solve the problem with mixed unit? I cannot avoid using % in my css var.

asked Jan 02 '21 at 08:28

Heyyy Marco

and what (percentage * percentage) should give as a result? this is an invalid operation – Temani Afif Jan 02 '21 at 08:29
the background color wouldn't be set. the hsl() function didn't recognize the % * % – Heyyy Marco Jan 02 '21 at 08:32
because you cannot mutiply % with %, it's invalid so the whole calc is invalid (you cannot also divide with %) – Temani Afif Jan 02 '21 at 08:33
how i do calculation with variables containing with % unit? – Heyyy Marco Jan 02 '21 at 08:37
you simply cannot, you need to rethink your logic ... % * % is simply invalid. Any mix of unit is simply invalid. If I told you % * px, what should be the result? it's invalid ... – Temani Afif Jan 02 '21 at 08:39
but 100vw - 20px is valid, why % - % is not? – Heyyy Marco Jan 02 '21 at 08:43
because this is not a multiplicate and `% - %` is valid. What is not valid is `% * %` (read the duplicate to understand the rules) – Temani Afif Jan 02 '21 at 08:45
so is this invalid too? calc(100vw * (20px / 40px)) – Heyyy Marco Jan 02 '21 at 08:53
read the duplicate please – Temani Afif Jan 02 '21 at 08:58

how to calculate css custom variables? calc(percentage * percentage)

0 Answers0