// 
// margin and padding helper classes
//
@for $i from 1 through 10 {

  $pixel: $i * 5;

  .mt#{$pixel} {
    margin-top: #{$pixel}px;
  }
  .mr#{$pixel} {
    margin-right: #{$pixel}px;
  }
  .mb#{$pixel} {
    margin-bottom: #{$pixel}px;
  }
  .ml#{$pixel} {
    margin-left: #{$pixel}px;
  }

  .pt#{$pixel} {
    padding-top: #{$pixel}px;
  }
  .pr#{$pixel} {
    padding-right: #{$pixel}px;
  }
  .pb#{$pixel} {
    padding-bottom: #{$pixel}px;
  }
  .pl#{$pixel} {
    padding-left: #{$pixel}px;
  }
}

The above structure will generate the following classes:

.mt5 {
  margin-top: 5px
}

.mr5 {
  margin-right: 5px
}

.mb5 {
  margin-bottom: 5px
}

.ml5 {
  margin-left: 5px
}

.pt5 {
  padding-top: 5px
}

.pr5 {
  padding-right: 5px
}

.pb5 {
  padding-bottom: 5px
}

.pl5 {
  padding-left: 5px
}

.mt10 {
  margin-top: 10px
}

.mr10 {
  margin-right: 10px
}

.mb10 {
  margin-bottom: 10px
}

.ml10 {
  margin-left: 10px
}

.pt10 {
  padding-top: 10px
}

.pr10 {
  padding-right: 10px
}

.pb10 {
  padding-bottom: 10px
}

.pl10 {
  padding-left: 10px
}

.mt15 {
  margin-top: 15px
}

// ... until 50 pixel

Example usage:

<div class="pt20 pr10 pb20 pl10">hello world</div>

 

Categories: CSS