BorderWidth.scss 967 B

123456789101112131415161718192021222324252627282930313233343536
  1. // Border Width
  2. [class*='border-'] {
  3. border: 0 solid RGB(0 0 0 / var(--border-opacity));
  4. }
  5. $arr: '', 0, 2, 3, 4, 8;
  6. @mixin render($name, $val) {
  7. .border#{$name} { border-width: $val; }
  8. }
  9. @mixin renderOther($name, $val) {
  10. .border-x#{$name} { border-left-width: $val; border-right-width: $val; }
  11. .border-y#{$name} { border-top-width: $val; border-bottom-width: $val; }
  12. .border-s#{$name} { border-inline-start-width: $val; }
  13. .border-e#{$name} { border-inline-end-width: $val; }
  14. .border-t#{$name} { border-top-width: $val; }
  15. .border-r#{$name} { border-right-width: $val; }
  16. .border-b#{$name} { border-bottom-width: $val; }
  17. .border-l#{$name} { border-left-width: $val; }
  18. }
  19. @each $name in $arr {
  20. @if ($name == '') {
  21. @include render($name, 1rpx);
  22. } @else {
  23. @include render(-#{$name}, #{$name * 2}rpx);
  24. }
  25. }
  26. @each $name in $arr {
  27. @if ($name == '') {
  28. @include renderOther($name, 1rpx);
  29. } @else {
  30. @include renderOther(-#{$name}, #{$name * 2}rpx);
  31. }
  32. }