SASS/SCSS responsive columns

lumpy-responsive-columns.scss

/*
	===========
	= columns =
	===========
*/



$gutter: 4%;

.cols {

	@extend %clearfix;

}

.col {
	margin-bottom: $gap;
}

@include breakpoint( $break-3 ) {

	.col {
		float: left;
		margin-right: $gutter;

		@extend %clearfix;

		&:last-of-type {
			margin-right: 0;
		}

		& .col {
			margin-bottom: 0;
		}

	}

	.col-1-2 {
		width: ( 100 - $gutter ) / 2;
	}

	.col-1-3 {
		width: ( 100 - 2 * $gutter ) / 3;
	}

	.col-2-3 {
		width: ( ( ( 100 - 2 * $gutter ) * 2 ) / 3 ) + $gutter;
	}

	.col-1-4 {
		width: ( 100 - 3 * $gutter ) / 4;
	}

	.col-2-4 {
		width: ( ( ( 100 - 3 * $gutter ) * 2 ) / 4 ) + $gutter;
	}

	.col-3-4 {
		width: ( ( ( 100 - 3 * $gutter ) * 3 ) / 4 ) + 2 * $gutter;
	}

	.col-1-5 {
		width: ( 100 - 4 * $gutter ) / 5;
	}

	.col-2-5 {
		width: ( ( ( 100 - 4 * $gutter ) * 2 ) / 5 ) + $gutter;
	}

	.col-3-5 {
		width: ( ( ( 100 - 4 * $gutter ) * 3 ) / 5 ) + 2 * $gutter;
	}

	.col-4-5 {
		width: ( ( ( 100 - 4 * $gutter ) * 4 ) / 5 ) + 3 * $gutter;
	}

}