SCSS Responsive Columns

_col.scss

.boxBase {
	@include box-sizing(border-box);
	margin-bottom: $lu;
	padding: $lu;
	@media screen and (max-width: 480px) {
		/* Halve the padding on mobile devices */
		$lum: $lu / 2;
		padding: $lum;
		margin-bottom: $lum;
	}
}

@mixin colIEFix{
	overflow:hidden; 
	*overflow:visible;
	*zoom:1;
}

.colGroup {
	@include colIEFix;
	margin: 0;
	padding: 0;
}

.colBase{
	@extend .boxBase;
	float:left;
	padding: 0 $lu 0 0;
	margin-bottom: 0;
}

@mixin col1of1{ float:none; }
@mixin col1of2{ width:50%; }
@mixin col1of3{	width:33.33333%; }
@mixin col2of3{	width:66.66666%; }
@mixin col1of4{	width:25%; }
@mixin col3of4{	width:75%; }
@mixin col1of5{	width:20%; }
@mixin col2of5{	width:40%; }
@mixin col3of5{	width:60%; }
@mixin col4of5{	width:80%; }

.colContent { @extend .boxBase; }

@mixin colLast{
	@include colIEFix;
	float:none;
	width:auto;
	padding: 0;
	_position:relative;
	_left:-3px;
	_margin-right:-3px;
}

@mixin colClear {
	float: none;
	clear: both;
	width: 100%;
	padding: 0;
}

columns.html

<div class="colGroup">
	<div class="item1Wrapper itemGroup1">
		<div class="colContent item1Content">
			item1
		</div>
	</div>
	<div class="item2Wrapper itemGroup1">
		<div class="colContent item2Content">
			item2
		</div>
	</div>
</div>

columns.scss

@import "_col";

.item1Wrapper,
.item2Wrapper {
	@extend .colBase;
	@include col1of2;
}
.item2Wrapper {
	@include colLast;
}

.itemGroup1 {
	@media screen and (max-width: 480px) {
		// Make single column at -480px
		@include colClear;
	}
}


.item1Content,
.item2Content {
	/* Visual styles in here */
	@extend .gradYellow;
}