SASS mixin for responsive grids

README.md

Responsive grids in SASS

Ever wanted to generate @media rules for your grid?

Ever used a calculator or an Excel spreadsheet to calculate widths for every column?

No more!

Usage:

+responsive-grid($other-space: 600px, $gutter: 20px)

responsive-grid.sass

=responsive-grid ($other-space: 500px, $column-width: 20px, $gutter: 12px, $min-columns: 2, $max-columns: 10)

	@media screen
		$grid-width: 0

		@for $columns from $min-columns through $max-columns
			$new-width: $columns * $column-width + ($columns - 1) * $gutter
			$max-width: $new-width + $other-space
			@if $columns == $max-columns
				max-width: $new-width
			@else
				@if $columns == $min-columns
					min-width: $new-width
				@else
					@media (max-width: $max-width) and (min-width: $grid-width + $other-space+ 1)
						width: $new-width

			$grid-width: $new-width