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

Demo : fixed margin Containers

Demo : Content only scroll

Demo : Right-bottom positioning