sizing.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. @for $i from 0 through 750 {
  2. // width: {0~750}rpx;
  3. .#{$prefix}w-#{$i}r {
  4. width: $i + rpx;
  5. }
  6. // min-width: {0~750}rpx;
  7. // .#{$prefix}min-w-#{$i}r {
  8. // min-width: $i + rpx;
  9. // }
  10. // max-width: {0~750}rpx;
  11. // .#{$prefix}max-w-#{$i}r {
  12. // max-width: $i + rpx;
  13. // }
  14. // height: {0~750}rpx;
  15. .#{$prefix}h-#{$i}r {
  16. height: $i + rpx;
  17. }
  18. // min-height: {0~750}rpx;
  19. // .#{$prefix}min-h-#{$i}r {
  20. // min-height: $i + rpx;
  21. // }
  22. // max-height: {0~750}rpx;
  23. // .#{$prefix}max-h-#{$i}r {
  24. // max-height: $i + rpx;
  25. // }
  26. }
  27. @for $i from 0 through 500 {
  28. // width: {0~500}px;
  29. .#{$prefix}w-#{$i} {
  30. width: $i + px;
  31. }
  32. // min-width: {0~500}px;
  33. // .#{$prefix}min-w-#{$i} {
  34. // min-width: $i + px;
  35. // }
  36. // max-width: {0~500}px;
  37. // .#{$prefix}max-w-#{$i} {
  38. // max-width: $i + px;
  39. // }
  40. // height: {0~500}px;
  41. .#{$prefix}h-#{$i} {
  42. height: $i + px;
  43. }
  44. // min-height: {0~500}px;
  45. // .#{$prefix}min-h-#{$i} {
  46. // min-height: $i + px;
  47. // }
  48. // max-height: {0~500}px;
  49. // .#{$prefix}max-h-#{$i} {
  50. // max-height: $i + px;
  51. // }
  52. }
  53. /* #ifndef APP-NVUE */
  54. @for $i from 0 through 100 {
  55. // width: {0~100}%;
  56. .#{$prefix}w-#{$i}p {
  57. width: $i * 1%;
  58. }
  59. // height: {0~100}%;
  60. .#{$prefix}h-#{$i}p {
  61. height: $i * 1%;
  62. }
  63. }
  64. // Box Sizing
  65. .#{$prefix}box-border {
  66. box-sizing: border-box;
  67. }
  68. .#{$prefix}box-content {
  69. box-sizing: content-box;
  70. }
  71. /* #endif */