Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // $gen_var generates a css variable
- // e.g. --single-spacing: 1.2;
- var $gen_var = (obj, ident) =>
- `--${obj.ident_prefix + ident}: ${obj.data[ident]};`
- // $gen_class generates a css class
- // e.g. .single-spacing { line-height: var(--single-spacing); }
- var $gen_class = (obj, ident) =>
- `.${obj.ident_prefix + ident} { ${obj.prop}: var(--${ident}); }`
- // $factory generates either a css variable or class
- var $factory = (prefix, obj, fn) =>
- Object
- .keys(obj.data)
- .map (ident => fn(obj, ident))
- .join(`\n${prefix}`)
- // $gen_vars generates css variables
- // e.g. --single-spacing: 1.2;
- // e.g. --normal-spacing: 1.5;
- // e.g. --double-spacing: 2.0;
- var $gen_vars = (obj) =>
- `\n:root {\n\t${$factory("\t", obj, $gen_var)}\n}\n`
- // $gen_vars generates css classes
- // e.g. .single-spacing { line-height: var(--single-spacing); }
- // e.g. .normal-spacing { line-height: var(--normal-spacing); }
- // e.g. .double-spacing { line-height: var(--double-spacing); }
- var $gen_classes = (obj) =>
- `\n${$factory("", obj, $gen_class)}\n`
- // $generate generates css
- // e.g. :root { --single-spacing: 1.2; }
- // e.g. .single-spacing { line-height: var(--single-spacing); }
- var $generate = (obj) =>
- (obj.gen_vars ? $gen_vars (obj) : "") +
- (obj.gen_classes ? $gen_classes(obj) : "")
- var $mtop = {
- prop: "margin-top",
- ident_prefix : "mtop-",
- gen_vars: false,
- gen_classes : true,
- data: {
- "extra-smallest" : null,
- "extra-smaller " : null
- }
- }
- console.log($generate($mtop))
Add Comment
Please, Sign In to add comment