Cool SASS Margin and Padding Mixin

By Richard Chiriboga

Tags: css
Published:

So I have recently really gotten into SASS and how powerful it is. I mean I have used it before but nothing like I have in the last couple of weeks. Real world examples are always the best; Especially when you have a more experienced developer helping.

Margin and Padding

I have done this for as long as I can remember. I will do margin-top, margin-bottom, padding-top, padding-bottom and I usually do 5, 10, 15, 20, etc. This makes it so easy for me to do this.

$sides: ("b": "bottom","t": "top");
@each $prefix, $value in $sides {
  $property: if($prefix == '', '', -#{$value});
  @for $i from 0 through 10 {
    .m#{$prefix}{
      &#{($i * 5)} {
        margin#{$property}:#{($i * 5)}px;
      }
    }
    .p#{$prefix}{
      &#{($i * 5)} {
        padding#{$property}:#{($i * 5)}px;
      }
    }
  }
}

And what you get is this: Note that each one would be rendered not the “TO”

.mb0{margin-bottom:0px} TO .mb50{margin-bottom:50px}
.mt0{margin-top:0px} TO .mt50{margin-top:50px}
.pb0{padding-bottom:0px} TO .pb50{padding-bottom:50px}
.pt0{padding-top:0px} TO .pt50{padding-top:50px}

You can also check out the CodePen example below.

See the Pen Margins and Padding by Richard Chiriboga (@chiriboga) on CodePen.