css - переменные
 

Здраствуйте, я никак не могу подружить calc и переменною, подскажите пожалуйста что идет не так...

<div>
</div>
<style>
--val:50;
div{
background:red;
width:calc(1% * --val);
height:calc(1% * --val);
}
</style>

fori,
var(--val)

fori,

<div>
</div>
<style>
body{
  height: 400px;
}
:root{
   --val:50;
}

div{
background:red;
width:calc(1% * var(--val));
height:calc(1% * var(--val));
}
</style>