World of trickery with css functions

Who am I ?

  • @praveenpuglia
  • github.com/praveenpuglia

Yes! css has functions

...and we have all used them

- url()
- calc()
- rgb/rgba()
- hsl/hsla()
- linear/radial-gradient()
- counter()
- attr()
- scale()/rotate()/translate()
calc()

The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. With calc(), you can perform calculations to determine CSS property values.

- Mozilla Developer Network (MDN)

Arithmetic Operations

calc() supports +, -, /, * operators

you need whitespace around the + and - operators. Without that it's considered invalid syntax.

 

Why? CSS Variables Forward Compatibility

Nesting

calc( calc(20px / 2) / 4) /* becomes... */

calc(     (20px / 2) / 4) =  2.5px

CSS variables can be used to make this look simpler.

--calcA : calc(20px / 2);
--calcB : calc( var(--calcA) / 4);

Demo : Grids

Resources

Made with Slides.com