index.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. // 定义基础单位和最大类数
  2. $base-unit: 4px;
  3. $max-classes: 10;
  4. // 生成 padding-left (pl) 类
  5. @for $i from 0 through $max-classes {
  6. .pl-#{$i} {
  7. padding-left: $base-unit * $i;
  8. }
  9. .ml-#{$i} {
  10. margin-left: $base-unit * $i;
  11. }
  12. .pr-#{$i} {
  13. padding-right: $base-unit * $i;
  14. }
  15. .mr-#{$i} {
  16. margin-right: $base-unit * $i;
  17. }
  18. .pt-#{$i} {
  19. padding-top: $base-unit * $i;
  20. }
  21. .mt-#{$i} {
  22. margin-top: $base-unit * $i;
  23. }
  24. .pb-#{$i} {
  25. padding-bottom: $base-unit * $i;
  26. }
  27. .mb-#{$i} {
  28. margin-bottom: $base-unit * $i;
  29. }
  30. .pa-#{$i} {
  31. padding: $base-unit * $i;
  32. }
  33. .ma-#{$i} {
  34. margin: $base-unit * $i;
  35. }
  36. .px-#{$i} {
  37. padding-left: $base-unit * $i;
  38. padding-right: $base-unit * $i;
  39. }
  40. .mx-#{$i} {
  41. margin-left: $base-unit * $i;
  42. margin-right: $base-unit * $i;
  43. }
  44. .py-#{$i} {
  45. padding-top: $base-unit * $i;
  46. padding-bottom: $base-unit * $i;
  47. }
  48. .my-#{$i} {
  49. margin-top: $base-unit * $i;
  50. margin-bottom: $base-unit * $i;
  51. }
  52. }
  53. .cursor-pointer {
  54. cursor: pointer;
  55. }
  56. .white {
  57. background-color: white;
  58. }