SCSS_TRICKS.md

To set your custom margin,padding for custom value(10,20 or any),

@each $size in (0, 4, 7, 10, 14, 15, 20, 25, 30, 35, 40, 50, 60, 70, 100, 150) {
 .m-#{$size} {
   margin: #{$size}px;
 }
 .mt-#{$size} {
   margin-top: #{$size}px;
 }
 .mb-#{$size} {
   margin-bottom: #{$size}px;
 }
 .ml-#{$size} {
   margin-left: #{$size}px;
 }
 .mr-#{$size} {
   margin-right: #{$size}px;
 }
 .mlr-#{$size} {
   margin-left: #{$size}px;
   margin-right: #{$size}px;
 }
 .mtb-#{$size} {
   margin-top: #{$size}px;
   margin-bottom: #{$size}px;
 }
 .p-#{$size} {
   padding: #{$size}px;
 }
 .pt-#{$size} {
   padding-top: #{$size}px;
 }
 .pb-#{$size} {
   padding-bottom: #{$size}px;
 }
 .pl-#{$size} {
   padding-left: #{$size}px;
 }
 .pr-#{$size} {
   padding-right: #{$size}px;
 }
 .plr-#{$size} {
   padding-left: #{$size}px;
   padding-right: #{$size}px;
 }
 .ptb-#{$size} {
   padding-top: #{$size}px;
   padding-bottom: #{$size}px;
 }
}