Guest User

Untitled

a guest
Jul 20th, 2018
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.46 KB | None | 0 0
  1. // $gen_var generates a css variable
  2. // e.g. --single-spacing: 1.2;
  3. var $gen_var = (obj, ident) =>
  4. `--${obj.ident_prefix + ident}: ${obj.data[ident]};`
  5.  
  6. // $gen_class generates a css class
  7. // e.g. .single-spacing { line-height: var(--single-spacing); }
  8. var $gen_class = (obj, ident) =>
  9. `.${obj.ident_prefix + ident} { ${obj.prop}: var(--${ident}); }`
  10.  
  11. // $factory generates either a css variable or class
  12. var $factory = (prefix, obj, fn) =>
  13. Object
  14. .keys(obj.data)
  15. .map (ident => fn(obj, ident))
  16. .join(`\n${prefix}`)
  17.  
  18. // $gen_vars generates css variables
  19. // e.g. --single-spacing: 1.2;
  20. // e.g. --normal-spacing: 1.5;
  21. // e.g. --double-spacing: 2.0;
  22. var $gen_vars = (obj) =>
  23. `\n:root {\n\t${$factory("\t", obj, $gen_var)}\n}\n`
  24.  
  25. // $gen_vars generates css classes
  26. // e.g. .single-spacing { line-height: var(--single-spacing); }
  27. // e.g. .normal-spacing { line-height: var(--normal-spacing); }
  28. // e.g. .double-spacing { line-height: var(--double-spacing); }
  29. var $gen_classes = (obj) =>
  30. `\n${$factory("", obj, $gen_class)}\n`
  31.  
  32. // $generate generates css
  33. // e.g. :root { --single-spacing: 1.2; }
  34. // e.g. .single-spacing { line-height: var(--single-spacing); }
  35. var $generate = (obj) =>
  36. (obj.gen_vars ? $gen_vars (obj) : "") +
  37. (obj.gen_classes ? $gen_classes(obj) : "")
  38.  
  39. var $mtop = {
  40. prop: "margin-top",
  41. ident_prefix : "mtop-",
  42. gen_vars: false,
  43. gen_classes : true,
  44. data: {
  45. "extra-smallest" : null,
  46. "extra-smaller " : null
  47. }
  48. }
  49.  
  50. console.log($generate($mtop))
Add Comment
Please, Sign In to add comment