index.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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 !important;
  8. }
  9. .ml-#{$i} {
  10. margin-left: $base-unit * $i !important;
  11. }
  12. .pr-#{$i} {
  13. padding-right: $base-unit * $i !important;
  14. }
  15. .mr-#{$i} {
  16. margin-right: $base-unit * $i !important;
  17. }
  18. .pt-#{$i} {
  19. padding-top: $base-unit * $i !important;
  20. }
  21. .mt-#{$i} {
  22. margin-top: $base-unit * $i !important;
  23. }
  24. .pb-#{$i} {
  25. padding-bottom: $base-unit * $i !important;
  26. }
  27. .mb-#{$i} {
  28. margin-bottom: $base-unit * $i !important;
  29. }
  30. .pa-#{$i} {
  31. padding: $base-unit * $i !important;
  32. }
  33. .ma-#{$i} {
  34. margin: $base-unit * $i !important;
  35. }
  36. .px-#{$i} {
  37. padding-left: $base-unit * $i !important;
  38. padding-right: $base-unit * $i !important;
  39. }
  40. .mx-#{$i} {
  41. margin-left: $base-unit * $i !important;
  42. margin-right: $base-unit * $i !important;
  43. }
  44. .py-#{$i} {
  45. padding-top: $base-unit * $i !important;
  46. padding-bottom: $base-unit * $i !important;
  47. }
  48. .my-#{$i} {
  49. margin-top: $base-unit * $i !important;
  50. margin-bottom: $base-unit * $i !important;
  51. }
  52. }
  53. .cursor-pointer {
  54. cursor: pointer;
  55. }
  56. .white {
  57. background-color: white;
  58. }
  59. .text-right {
  60. text-align: right;
  61. }
  62. .text-center {
  63. text-align: center;
  64. }
  65. .text-left {
  66. text-align: left;
  67. }
  68. .text-justify {
  69. text-align: justify;
  70. }
  71. .text-nowrap {
  72. white-space: nowrap;
  73. }
  74. .d-flex {
  75. display: flex;
  76. }