css 基于Foundation排水沟的响应边距和填充

Posted 2021-05-13

@mixin gutters($sides: (top, left, right, bottom), $modifiers: (2, 3, 4, 5)) {
  @each $breakpoint, $gutter in $grid-column-gutter {
    @include breakpoint($breakpoint) {
      
      .#{$breakpoint}-m-none {
        margin:0;
      }

      @each $side in $sides {

        .#{$breakpoint}-m-#{$side} {
          margin-#{$side}: rem-calc($gutter);
        }
        .#{$breakpoint}-p-#{$side} {
          padding-#{$side}: rem-calc($gutter);
        }

        @each $modifier in $modifiers{

          .#{$breakpoint}-m-#{$side}-#{$modifier} {
            margin-#{$side}: rem-calc($gutter * $modifier);
          }
          .#{$breakpoint}-p-#{$side}-#{$modifier} {
            padding-#{$side}: rem-calc($gutter * $modifier);
          }

        }

      }
    }
  }
}

#Responsive margins and paddings from Foundation gutters


```
@include gutters();
```

.small-m-none {
  margin: 0;
}

.small-p-none {
  padding: 0;
}

.small-m-top {
  margin-top: 1.25rem;
}

.small-p-top {
  padding-top: 1.25rem;
}

.small-m-top-2 {
  margin-top: 2.5rem;
}

.small-p-top-2 {
  padding-top: 2.5rem;
}

.small-m-top-3 {
  margin-top: 3.75rem;
}

.small-p-top-3 {
  padding-top: 3.75rem;
}

.small-m-top-4 {
  margin-top: 5rem;
}

.small-p-top-4 {
  padding-top: 5rem;
}

.small-m-top-5 {
  margin-top: 6.25rem;
}

.small-p-top-5 {
  padding-top: 6.25rem;
}

.small-m-left {
  margin-left: 1.25rem;
}

.small-p-left {
  padding-left: 1.25rem;
}

.small-m-left-2 {
  margin-left: 2.5rem;
}

.small-p-left-2 {
  padding-left: 2.5rem;
}

.small-m-left-3 {
  margin-left: 3.75rem;
}

.small-p-left-3 {
  padding-left: 3.75rem;
}

.small-m-left-4 {
  margin-left: 5rem;
}

.small-p-left-4 {
  padding-left: 5rem;
}

.small-m-left-5 {
  margin-left: 6.25rem;
}

.small-p-left-5 {
  padding-left: 6.25rem;
}

.small-m-right {
  margin-right: 1.25rem;
}

.small-p-right {
  padding-right: 1.25rem;
}

.small-m-right-2 {
  margin-right: 2.5rem;
}

.small-p-right-2 {
  padding-right: 2.5rem;
}

.small-m-right-3 {
  margin-right: 3.75rem;
}

.small-p-right-3 {
  padding-right: 3.75rem;
}

.small-m-right-4 {
  margin-right: 5rem;
}

.small-p-right-4 {
  padding-right: 5rem;
}

.small-m-right-5 {
  margin-right: 6.25rem;
}

.small-p-right-5 {
  padding-right: 6.25rem;
}

.small-m-bottom {
  margin-bottom: 1.25rem;
}

.small-p-bottom {
  padding-bottom: 1.25rem;
}

.small-m-bottom-2 {
  margin-bottom: 2.5rem;
}

.small-p-bottom-2 {
  padding-bottom: 2.5rem;
}

.small-m-bottom-3 {
  margin-bottom: 3.75rem;
}

.small-p-bottom-3 {
  padding-bottom: 3.75rem;
}

.small-m-bottom-4 {
  margin-bottom: 5rem;
}

.small-p-bottom-4 {
  padding-bottom: 5rem;
}

.small-m-bottom-5 {
  margin-bottom: 6.25rem;
}

.small-p-bottom-5 {
  padding-bottom: 6.25rem;
}

@media screen and (min-width: 40em) {
  .medium-m-top {
    margin-top: 1.875rem;
  }
  .medium-p-top {
    padding-top: 1.875rem;
  }
  .medium-m-top-2 {
    margin-top: 3.75rem;
  }
  .medium-p-top-2 {
    padding-top: 3.75rem;
  }
  .medium-m-top-3 {
    margin-top: 5.625rem;
  }
  .medium-p-top-3 {
    padding-top: 5.625rem;
  }
  .medium-m-top-4 {
    margin-top: 7.5rem;
  }
  .medium-p-top-4 {
    padding-top: 7.5rem;
  }
  .medium-m-top-5 {
    margin-top: 9.375rem;
  }
  .medium-p-top-5 {
    padding-top: 9.375rem;
  }
  .medium-m-left {
    margin-left: 1.875rem;
  }
  .medium-p-left {
    padding-left: 1.875rem;
  }
  .medium-m-left-2 {
    margin-left: 3.75rem;
  }
  .medium-p-left-2 {
    padding-left: 3.75rem;
  }
  .medium-m-left-3 {
    margin-left: 5.625rem;
  }
  .medium-p-left-3 {
    padding-left: 5.625rem;
  }
  .medium-m-left-4 {
    margin-left: 7.5rem;
  }
  .medium-p-left-4 {
    padding-left: 7.5rem;
  }
  .medium-m-left-5 {
    margin-left: 9.375rem;
  }
  .medium-p-left-5 {
    padding-left: 9.375rem;
  }
  .medium-m-right {
    margin-right: 1.875rem;
  }
  .medium-p-right {
    padding-right: 1.875rem;
  }
  .medium-m-right-2 {
    margin-right: 3.75rem;
  }
  .medium-p-right-2 {
    padding-right: 3.75rem;
  }
  .medium-m-right-3 {
    margin-right: 5.625rem;
  }
  .medium-p-right-3 {
    padding-right: 5.625rem;
  }
  .medium-m-right-4 {
    margin-right: 7.5rem;
  }
  .medium-p-right-4 {
    padding-right: 7.5rem;
  }
  .medium-m-right-5 {
    margin-right: 9.375rem;
  }
  .medium-p-right-5 {
    padding-right: 9.375rem;
  }
  .medium-m-bottom {
    margin-bottom: 1.875rem;
  }
  .medium-p-bottom {
    padding-bottom: 1.875rem;
  }
  .medium-m-bottom-2 {
    margin-bottom: 3.75rem;
  }
  .medium-p-bottom-2 {
    padding-bottom: 3.75rem;
  }
  .medium-m-bottom-3 {
    margin-bottom: 5.625rem;
  }
  .medium-p-bottom-3 {
    padding-bottom: 5.625rem;
  }
  .medium-m-bottom-4 {
    margin-bottom: 7.5rem;
  }
  .medium-p-bottom-4 {
    padding-bottom: 7.5rem;
  }
  .medium-m-bottom-5 {
    margin-bottom: 9.375rem;
  }
  .medium-p-bottom-5 {
    padding-bottom: 9.375rem;
  }
}