build custom web-framework with SASS

Build custom web-framework (like 960) with Sass (Scss):

$width: 960px;

$gutter: 20px;

$columns: 12;

$column_width: $width / $columns;



body {

	min-width: $width;

}



.container {

	margin-left: auto;

	margin-right: auto;

	width: $width;

}



.grid {

	display: inline;

	float: left;

	margin-left: $gutter / 2;

	margin-right: $gutter / 2;

}



@for $i from 1 through $columns { // 'to' (without last item) or 'through' (with last item)

	.grid_#{$i} {

		@extend .grid;

		width: $i * $column_width - $gutter;

	}

}