SASS Margin/Padding Utilities

utils.scss

/*!
 * Margin Offsets
 */

.mv0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.mh0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mt0,.remove-top {
  margin-top: 0 !important;
}
.mb0,.remove-bottom {
  margin-bottom: 0 !important;
}
@include media($medium-screen-up) {
  @for $i from 1 through 9 {
    $margin : $i*10;
    // margins - all sides
    .m#{$i}0 {
      margin: em($margin) !important;
    }
    // vertical margins (top and bottom)
    // .mv0 - .mv90
    .mv#{$i}0 {
      margin-top: em($margin) !important;
      margin-bottom: em($margin) !important;
    }
    // horizontal margins (left and right)
    // .mh0 - .mh90
    .mh#{$i}0 {
      margin-left: em($margin) !important;
      margin-right: em($margin) !important;
    }
    // top margins
    // .mt0 - .mt90
    .mt#{$i}0 {
      margin-top: em($margin) !important;
    }
    // bottom margins
    // .mt0 - .mt90
    .mb#{$i}0 {
      margin-bottom: em($margin) !important;
    }
  }
}

/*!
 * Padding Offsets
 */

.pv0 {
  padding-top: em(0) !important;
  padding-bottom: em(0) !important;
}
.ph0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pt0,.remove-top {
  padding-top: 0 !important;
}
.pb0,.remove-bottom {
  padding-bottom: 0 !important;
}
@include media($medium-screen-up) {
  @for $i from 1 through 9 {
    $padding : $i*10;
    // padding - all sides
    .p#{$i}0 {
      padding: em($padding) !important;
    }
    // vertical padding (top and bottom)
    // .pv0 - .pv90
    .pv#{$i}0 {
      padding-top: em($padding) !important;
      padding-bottom: em($padding) !important;
    }
    // horizontal padding (left and right)
    // .ph0 - .ph90
    .ph#{$i}0 {
      padding-left: em($padding) !important;
      padding-right: em($padding) !important;
    }
    // top padding
    // .pt0 - .pt90
    .pt#{$i}0 {
      padding-top: em($padding) !important;
    }
    // bottom padding
    // .pb0 - .pb90
    .pb#{$i}0 {
      padding-bottom: em($padding) !important;
    }
  }
}