Kevin Powell - Community•2y ago

Is there a way to use a clamp as a var ?

I'm using the same clamp for some of my gaps and margins and i would like to store it in a var but it doesn't seems to work. It could also be useful for font sizing. Is there a way to do so ?

6 Replies

Mannix•2y ago

what does it look like?

Xero'•2y ago

*{
  --largeSpacing: clamp(10px, calc(6.94vw - 43.28px), 40px)
}

.exemple1{
  margin-bottom: var(--largeSpacing);
}

.exemple2{
  padding: var(--largeSpacing)
}

*{
  --largeSpacing: clamp(10px, calc(6.94vw - 43.28px), 40px)
}

.exemple1{
  margin-bottom: var(--largeSpacing);
}

.exemple2{
  padding: var(--largeSpacing)
}

(values are okward but it allows the min value to be reached at 768px wich is my phone breakpoint and max at 1200px)

Mannix•2y ago

looks ok but i would set the variable on :root not a * https://codepen.io/MannixMD/pen/vYrxRyj

Mannix

CodePen

vYrxRyj

...

Xero'•2y ago

there is definitively something i did wrong ^^

13eck•2y ago

Yeah, put your variables on ::root. Otherwise you’re setting that variable on *every * element when you only need it on the one

Mannix•2y ago

wrong selector maybe ?

Gaming

Programming

Is there a way to use a clamp as a var ?