SCSS PADDING & MARGIN RESPONSIVE MIXIN

mixins.scss

/***
  Responsive Width
**/
$screen-sm:                  768px !default;
$screen-md:                  992px !default;
$screen-lg:                  1200px !default;
/**
  Mixins
**/
@mixin pd_mg($class,$size,$type) {
	
	@for $i from 1 through $size {
		
		//== Margin & Padding xs
		@if (($i % 5) == 0){ 
			$variable_px : 1px * $i;
			//! Push
	 		.#{$class}-v-ps-auto-#{$i}{ #{$type} : $variable_px auto;}
	 		.#{$class}-h-ps-auto-#{$i}{ #{$type} : auto $variable_px;} 
			.#{$class}-t-ps-#{$i}{ #{$type}-top : $variable_px;}
			.#{$class}-l-ps-#{$i}{ #{$type}-left : $variable_px;}
			.#{$class}-r-ps-#{$i}{ #{$type}-right : $variable_px;}
			.#{$class}-b-ps-#{$i}{ #{$type}-bottom : $variable_px;}

			//! Offset
			$variable_of : 1% * $i;
	 		.#{$class}-v-of-auto-#{$i}{ #{$type} : $variable_of auto;}
	 		.#{$class}-h-of-auto-#{$i}{ #{$type} : auto $variable_of;} 
			.#{$class}-t-of-#{$i}{ #{$type}-top : $variable_of;}
			.#{$class}-l-of-#{$i}{ #{$type}-left : $variable_of;}
			.#{$class}-r-of-#{$i}{ #{$type}-right : $variable_of;}
			.#{$class}-b-of-#{$i}{ #{$type}-bottom : $variable_of;}
		} 			
 		.#{$class}-v-auto-#{$type}{ #{$type} : 0 auto;}
 		.#{$class}-h-auto-#{$type}{ #{$type} : auto 0;}
 		.#{$class}-auto-#{$type}{ #{$type} : auto;}
		.#{$class}-t-auto-#{$type}{ #{$type}-top : auto;}
		.#{$class}-l-auto-#{$type}{ #{$type}-left : auto;}
		.#{$class}-m-auto-#{$type}{ #{$type}-right : auto;}
		.#{$class}-b-auto-#{$type}{ #{$type}-bottom : auto;}
	}

}

@include pd_mg(m-xs,100,margin);
@include pd_mg(p-xs,100,padding);

@media (min-width: $screen-sm-min) { 
	@include pd_mg(m-sm,100,margin);
	@include pd_mg(p-sm,100,padding);
}
@media (min-width: $screen-md-min) { 
	@include pd_mg(m-md,100,margin);
	@include pd_mg(p-md,100,padding);
}
@media (min-width: $screen-lg-min) { 
	@include pd_mg(m-lg,100,margin);
	@include pd_mg(p-lg,100,padding);
}