DEV Community

loading...

Discussion on: CSS Variables

Collapse
samanthaming profile image
Samantha Ming Author

that's super cool! ...btw, do you mind explaining nested calc? 🙂

Collapse
adam_cyclones profile image
Adam Crockett

Sure, it's not widely known or atleast it wasn't usefull to nest calc function given that before variables, values where essentially hard coded.

:root {
   --grid-colomns: 12;
}

.thing {
    width: calc(100vw / var(--grid-columns) * calc(var(--grid-columns) * 2)
}

Okay this is a terrible example but it does illustrate how CSS can become config based and calc can do most of the work.

Thread Thread
samanthaming profile image
Samantha Ming Author

Oh cool!!! That’s super neat...I got to read this a few more time to understand it 😅...thanks so much for explaining it! Love learning new things ⭐️⭐️⭐️

Thread Thread
adam_cyclones profile image
Adam Crockett

Your not the only one, I found this out recently, didn't know calc was nestable, your most welcome.