DEV Community

Discussion on: CSS Variables

Collapse
 
konrud profile image
Konstantin Rouda

As far as I remember syntax in the following example is invalid:

:root {
  --value: 5;
}

div {
  padding: var(--value) px; /* 5px */
}

We can not build up values in CSS the way it depicted in the example above,
we should always combine it with the calc(), like this:

:root { --value: 5; } 
div { 
 padding: calc(var(--value) * 1px); /* 5px */ 
}  
Collapse
 
samanthaming profile image
Samantha Ming

Great catch!!!! Let me fix that, thank you!!!! 💪