Grid mixins for bootstrap 4

bootstrap-grid-mixins.scss

// Have a rule differ in different sizes
@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;
			};
		}
	}
}

// Same as adding a 'container' class in non-sass Bootstrap
@mixin make-cont() {
	@include make-container();
	@include make-container-max-widths();
}

// One mixin to rule all col makings
@mixin make-cols( $cols... ) {
	@include make-col-ready();
	@for $i from 1 through length( $grid-breakpoints ) {
		@if length( $cols ) >= $i {
			@media ( min-width: #{map-get( $grid-breakpoints, nth( map-keys( $grid-breakpoints ), $i ) )} ) {
				@include make-col( nth( $cols, $i ) );
			}
		} @else {
			@media ( min-width: #{map-get( $grid-breakpoints, nth( map-keys( $grid-breakpoints ), $i ) )} ) {
				@include make-col( nth( $cols, length( $cols ) ) );
			}
		}
	}
}

// One mixin to rule all col offsets
@mixin make-col-offsets( $cols... ) {
	@for $i from 1 through length( $grid-breakpoints ) {
		@if length( $cols ) >= $i {
			@media ( min-width: #{map-get( $grid-breakpoints, nth( map-keys( $grid-breakpoints ), $i ) )} ) {
				margin-left: percentage( nth( $cols, $i ) / $grid-columns );
			}
		} @else {
			@media ( min-width: #{map-get( $grid-breakpoints, nth( map-keys( $grid-breakpoints ), $i ) )} ) {
				margin-left: percentage( nth( $cols, length( $cols ) ) / $grid-columns );
			}
		}
	}
}

// Making cols centered
@mixin make-centered-cols( $cols... ) {
	@for $i from 1 through length( $grid-breakpoints ) {
		@if length( $cols ) >= $i {
			@media ( min-width: #{map-get( $grid-breakpoints, nth( map-keys( $grid-breakpoints ), $i ) )} ) {
				@include make-col( nth( $cols, $i ) );
				@include make-col-offset( ( 12 - nth( $cols, $i ) ) / 2 );
			}
		} @else {
			@media ( min-width: #{map-get( $grid-breakpoints, nth( map-keys( $grid-breakpoints ), $i ) )} ) {
				@include make-col( nth( $cols, length( $cols ) ) );
				@include make-col-offset( ( 12 - nth( $cols, length( $cols ) ) ) / 2 );
			}
		}
	}
}

// The rest
@mixin make-col-xs( $cols ) {
	@include make-col-ready();
	@media (min-width: #{map-get( $grid-breakpoints, xs )}) {
		@include make-col( $cols );
	}
}

@mixin make-col-sm( $cols ) {
	@include make-col-ready();
	@media (min-width: #{map-get( $grid-breakpoints, sm )}) {
		@include make-col( $cols );
	}
}

@mixin make-col-md( $cols ) {
	@include make-col-ready();
	@media (min-width: #{map-get( $grid-breakpoints, md )}) {
		@include make-col( $cols );
	}
}

@mixin make-col-lg( $cols ) {
	@include make-col-ready();
	@media (min-width: #{map-get( $grid-breakpoints, lg )}) {
		@include make-col( $cols );
	}
}

@mixin make-col-xl( $cols ) {
	@include make-col-ready();
	@media (min-width: #{map-get( $grid-breakpoints, xl )}) {
		@include make-col( $cols );
	}
}