csscalc
JavaScript library to do math with css units.
Fully typed with typescript.
Currently supported units: px
, cm
, mm
, Q
, in
, pc
, pt
, vh
, vw
, vmin
, vmax
, rem
, %w
, %h
.
- Convert between css units
- Calculate css expressions
Based on https://developer.mozilla.org/en-US/docs/Web/CSS/length
Examples
Calculate what part of screen's width takes specified element:
; // %w means % of width;
Calculate area of element:
;
Convert pixels to percent of element's width:
;
Convert element's width percent to pixels:
; // or Relative"%w"50 ;
calc
method converts all known units and then invokes js's eval
method, so you can use any inline js code in calc
.
For example min/max from Math:
calc'Math.max(100%w, 100%h)', element
API
Absolute
map, units -> pixels.
Absoulte =
Relative
map, (units, calcContext) -> pixels.
Relative =
UnitRegexpStr
, UnitRegexp
, UnitRegexpGM
- regular expression to find units.
Convert between units:
;
Create calc context:
;
Calculate expression:
;;
Roadmap
- Reactive calculations