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;
	}
}

Leave a Reply

Your email address will not be published. Required fields are marked *