j2c-math
A j2c companion library to do math on CSS lengths like 2em
or 20%
.
Installation
$ npm install --save j2c-math
Usage
import {length} form 'j2c-math';import j2c from 'j2c'; let baseWidth = length('4em');let pageWidth = baseWidth.mul(10); // base * 10, returns a new object.let navWidth = baseWidth.mul(2); // base * 2let mainWidth = pageWidth.sub(navWidth); // page - side // j2c treats these objects as values. sheet = j2c.sheet({ " body": { margin: '0 auto', width: baseWidth, " nav": { float: 'left', width: sideWidth }, " main": { float: 'left', width: mainWidth } }})
Becomes
body { margin: 0 auto; width: 40em;}body nav{ float: left; width: 8em;}body main{ float: left; width: 32em;}
Factory
let len = length('2em') // returns a Length object.
The length
factory takes as input strings representing CSS lengths, like '2em'
, '3%'
. and returns a new Length
object, which is immutable.
Methods
The following methods are supported; they all return a new value:
len.add(another: length|string) : length
If another
is a string it must represent a length.
Units must match.
en.sub(another: length|string) : length
As above.
len.mul(n: number|string) : length
If n
is a string, it must represent a number, not a length.
len.div(n: number|string) : length
Likewise.
Division by 0 throws.
len.div(another: length|string) : number
Units must match.
Division by 0 throws.
len.toString()
and len.valueOf()
Return the corresponding length as a string. j2c
actually uses .valueOf()
under the hood to get the String representation.
console.log('' + length('6em').div(3)); // '2em'