A responsive-property mixin for Sass Bootstrap

responsive-property.scss

$grid-breakpoints: (
    xs: 0,
    sm: 544px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1920px
);

@mixin responsive-property( $rule, $sizes... ) {
	@each $size in $sizes {
		$i: index( $sizes, $size );
		@if $size == nth( $sizes, 1 ) {
			#{$rule}: $size;
		} @else {
			@include media-breakpoint-up( nth( map-keys( $grid-breakpoints ), $i ) ) { #{$rule}: $size; };
		}
	}
}