Create a list of CSS elements that can be used in the view for margin/padding.

Margin and padding elements

@each $property in margin, padding {
  @each $location in top, right, bottom, left {
    @for $i from 0 through 15 {
      .#{$property}-#{$location}-#{$i * 10} { #{$property}-#{$location}: 10px * $i; }
    }
  }
}

This will create a list of elements for margin/padding, top/right/bottom/left from 0px to 150px in increments of 10px.

Ex:

.padding-left-80 {
  padding-left: 80px;
}

.padding-left-90 {
  padding-left: 90px;
}

.padding-left-100 {
  padding-left: 100px;
}

.padding-left-110 {
  padding-left: 110px;
}

This is useful to use in your views (reusable elements).