var.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. @import './mixins/create.scss';
  2. // 公共前缀
  3. $prefix: l;
  4. // Spacer
  5. $spacer: create-var('spacer', 32rpx); // base
  6. $spacer-tn: create-var('spacer-tn', 8rpx); // Tiny
  7. $spacer-xs: create-var('spacer-xs', 16rpx); // Extra Small
  8. $spacer-sm: create-var('spacer-sm', 24rpx); // Small
  9. $spacer-md: create-var('spacer-md', 48rpx); // Medium
  10. $spacer-lg: create-var('spacer-lg', 64rpx); // Large
  11. $spacer-xl: create-var('spacer-xl', 96rpx); // Extra Large
  12. $spacer-hg: create-var('spacer-hg', 160rpx); // Huge //Ultra Big
  13. // Font 官方建议字体不跟随页面变化
  14. // $font-size: create-var('font-size', 28rpx);
  15. // $font-size-xs: create-var('font-size-xs', 20rpx);
  16. // $font-size-sm: create-var('font-size-sm', 24rpx);
  17. // $font-size-md: create-var('font-size-md', 32rpx);
  18. // $font-size-lg: create-var('font-size-lg', 40rpx);
  19. // $font-size-xl: create-var('font-size-xl', 72rpx);
  20. $font-size: create-var('font-size', 14px);
  21. $font-size-xs: create-var('font-size-xs', 10px);
  22. $font-size-sm: create-var('font-size-sm', 12px);
  23. $font-size-md: create-var('font-size-md', 16px);
  24. $font-size-lg: create-var('font-size-lg',20px);
  25. $font-size-xl: create-var('font-size-xl', 36px);
  26. $font-size-heading-1: create-var('font-size-heading-1', 76rpx);
  27. $font-size-heading-2: create-var('font-size-heading-2', 60rpx);
  28. $font-size-heading-3: create-var('font-size-heading-3', 48rpx);
  29. $font-size-heading-4: create-var('font-size-heading-4', 40rpx);
  30. $font-size-heading-5: create-var('font-size-heading-5', 32rpx);
  31. $font-family: create-var('font-family', PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规
  32. $font-family-md: create-var('font-family-md', PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体
  33. // 行高
  34. $line-height: create-var('line-height', 1.5714285714285714);
  35. $line-height-sm: create-var('line-height-sm', 1.6666666666666667);
  36. $line-height-md: create-var('line-height-lg', 1.5);
  37. $line-height-lg: create-var('line-height-lg', 1.4);
  38. $line-height-heading-1: create-var('line-height-heading-1', 1.2105263157894737);
  39. $line-height-heading-2: create-var('line-height-heading-2', 1.2666666666666666);
  40. $line-height-heading-3: create-var('line-height-heading-3', 1.3333333333333333);
  41. $line-height-heading-4: create-var('line-height-heading-4', 1.4);
  42. $line-height-heading-5: create-var('line-height-heading-5', 1.5);
  43. // 圆角
  44. $border-radius: create-var('border-radius', 12rpx);
  45. $border-radius-xs: create-var('border-radius-xs', 4rpx);
  46. $border-radius-sm: create-var('border-radius-sm', 6rpx);
  47. $border-radius-md: create-var('border-radius-md', 12rpx);
  48. $border-radius-lg: create-var('border-radius-lg', 18rpx);
  49. $border-radius-xl: create-var('border-radius-xl', 24rpx);
  50. $border-radius-hg: create-var('border-radius-hg', 999px);
  51. // $border-radius-circle: var(--l-border-radius-circle, 50%);
  52. // 动画
  53. $anim-time-fn-easing: create-var('anim-time-fn-easing', cubic-bezier(0.38, 0, 0.24, 1));
  54. $anim-time-fn-ease-out: create-var('anim-time-fn-ease-out', cubic-bezier(0, 0, 0.15, 1));
  55. $anim-time-fn-ease-in: create-var('anim-time-fn-ease-in', cubic-bezier(0.82, 0, 1, 0.9));
  56. $anim-duration-base: create-var('anim-duration-base', 0.2s);
  57. $anim-duration-moderate: create-var('anim-duration-moderate', 0.24s);
  58. $anim-duration-slow: create-var('anim-duration-slow', 0.28s);