responsive-bootstrap-gutters.scss

$breakpoints: (
		'xs': 0px,
		'sm': 768px,
		'md': 992px,
		'lg': 1200px,
);

$gutters: (
		'no': 0,
		'xs': 1px,
		'sm': 7px,
		'md': 15px,
		'lg': 22px,
		'xl': 30px
);

@each $breakpoint, $screen-size in $breakpoints {
	
	@each $name, $size in $gutters {
		/* #{$name} gutters */
		@debug $screen-size;
		@media (min-width: $screen-size) {
			.container.#{$breakpoint}-gutters-#{$name},
			.container-fluid.#{$breakpoint}-gutters-#{$name} {
				padding-right: #{$size};
				padding-left: #{$size};
				.row {
					margin-right: -#{$size};
					margin-left: -#{$size};
					
					> {
						[class^="col-"],
						[class*=" col-"] {
							padding-right: #{$size};
							padding-left: #{$size};
						}
					}
				}
			}
		}
	}
}