useSizes.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. function getPxs() {
  2. const _Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
  3. let Pxs = [{ name: 'px', px: 1 }]
  4. _Sizes.map(d => {
  5. let d5 = d * 5,
  6. d10 = d * 10
  7. if (d5 > 0 && d5 <= 40 && d5 % 5 == 0 && d5 % 10 != 0) {
  8. Pxs.push({ name: d5, px: d * 2 })
  9. }
  10. Pxs.push({ name: d10, px: d * 4 })
  11. })
  12. Pxs = Pxs.sort((n1, n2) => n1.px - n2.px).map(d => {
  13. d.name10 = d.name
  14. if (d.name != 'px') {
  15. let _name = d.name / 10
  16. if (_name % 1 == 0) {
  17. d.name = _name
  18. } else {
  19. d.name = `${_name}`.replace(/\./g, '-')
  20. }
  21. d._name = _name
  22. }
  23. return d
  24. })
  25. let sass = '',
  26. sassName = ''
  27. Pxs.map(d => {
  28. sass += `,'${d.name}' ${d.px} `
  29. sassName += `,'${d.name}' `
  30. })
  31. sass = sass.substring(1)
  32. sassName = sassName.substring(1)
  33. return { Pxs, pxsass: sass, pxSassName: sassName }
  34. }
  35. function getPercents() {
  36. const pct = [2, 3, 4, 5, 6, 12]
  37. let pcts = []
  38. pct.map((d) => {
  39. for (let it = 1; it < d; it++) {
  40. if (it != d) {
  41. pcts.push({
  42. name: `${it}_${d}`,
  43. val: (it / d * 100) % 1 == 0 ? it / d * 100 : it / d * 100,
  44. })
  45. }
  46. }
  47. })
  48. pcts.push(...[
  49. { name: 'auto', val: 'auto' },
  50. { name: 'full', val: '100%' },
  51. // {name: 'w-screen', val: '100vw'},
  52. // {name: 'h-screen', val: '100vh'},
  53. ])
  54. let sassNames = ''
  55. pcts.map(d => {
  56. sassNames += `,'${d.name}' `
  57. })
  58. sassNames = sassNames.substring(1)
  59. return { Pcts: pcts, pctSassName: sassNames }
  60. }
  61. function useHook() { // useSizes
  62. const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
  63. const Percents = [2, 3, 4, 5, 6, 12, 'full', 'auto']
  64. const Xls = ['3xs 10 12', '2xs 11 14', 'xs 12 16', 'mini 13 18', 'sm 14 20', 'md 15 22', 'base 16 24', 'lg 18 28', 'xl 20 28', '2xl 24 32', '3xl 30 36', '4xl 36 40', '5xl 48 0', '6xl 60 0', '7xl 72 0', '8xl 96 0', '9xl 128 0'].map(d => {
  65. let [name, fontSize, lineHeight] = d.split(' ')
  66. return {
  67. name,
  68. fontSize,
  69. lineHeight
  70. }
  71. })
  72. const { Pxs, pxsass, pxSassName } = getPxs()
  73. const { Pcts, pctSassName } = getPercents()
  74. // console.log(Pcts)
  75. return {
  76. Sizes: Pxs,
  77. Percents: Pcts,
  78. Xls,
  79. Pxs,
  80. Pcts,
  81. }
  82. }
  83. export default useHook