_space.scss 1.2KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. @mixin fn($space,$direction,$size,$n) {
  2. @if $n {
  3. #{$space}-#{$direction}: #{$size*$uni-space-root}px
  4. } @else {
  5. #{$space}-#{$direction}: #{-$size*$uni-space-root}px
  6. }
  7. }
  8. @mixin get-styles($direction,$i,$space,$n){
  9. @if $direction == t {
  10. @include fn($space, top,$i,$n);
  11. }
  12. @if $direction == r {
  13. @include fn($space, right,$i,$n);
  14. }
  15. @if $direction == b {
  16. @include fn($space, bottom,$i,$n);
  17. }
  18. @if $direction == l {
  19. @include fn($space, left,$i,$n);
  20. }
  21. @if $direction == x {
  22. @include fn($space, left,$i,$n);
  23. @include fn($space, right,$i,$n);
  24. }
  25. @if $direction == y {
  26. @include fn($space, top,$i,$n);
  27. @include fn($space, bottom,$i,$n);
  28. }
  29. @if $direction == a {
  30. @if $n {
  31. #{$space}:#{$i*$uni-space-root}px;
  32. } @else {
  33. #{$space}:#{-$i*$uni-space-root}px;
  34. }
  35. }
  36. }
  37. @each $orientation in m,p {
  38. $space: margin;
  39. @if $orientation == m {
  40. $space: margin;
  41. } @else {
  42. $space: padding;
  43. }
  44. @for $i from 0 through 16 {
  45. @each $direction in t, r, b, l, x, y, a {
  46. .uni-#{$orientation}#{$direction}-#{$i} {
  47. @include get-styles($direction,$i,$space,true);
  48. }
  49. .uni-#{$orientation}#{$direction}-n#{$i} {
  50. @include get-styles($direction,$i,$space,false);
  51. }
  52. }
  53. }
  54. }