Slick Responsive Photo Gallery with Sass

gistfile1.sass

// width as a readable fraction
$whole : 100%;
$half : 50%;
$third : 33.3333%;
$quater : 25%;
$sixth : 16.6666%;

// gallery breakpoints
$gallery-breakpoint-small:  em(0);
$gallery-breakpoint-medium: em(640);
$gallery-breakpoint-large:  em(1200);

// mixin for a quick responsive gallery grid
@mixin gallery_grid($s:100%,$m:100%,$l:100%) {
  @media (min-width: $gallery-breakpoint-small) {  width:$s; }
  @media (min-width: $gallery-breakpoint-medium) {  width:$m; }
  @media (min-width: $gallery-breakpoint-large) { width:$l; }
  box-sizing: border-box;
  float:left;
  display: inline-block;
}

.image-gallery-container {
	@extend %clearfix;
	background: #07080e;
}

// set defaults
.image  {
	@include gallery_grid($half,$third,$third);
}

// gallery styles based on count
.gallery-1-up {
	@include breakpoint(from-large) {
	    padding:0 25%;
	}
	.image  {
		@include gallery_grid($whole,$whole,$whole);
	}
}

.gallery-2-up {
	.image  {
		@include gallery_grid($half,$half,$half);
	}
}

.gallery-3-up {
	.image  {
		@include gallery_grid($half,$third,$third);
	}
	.image-1-of-3 {
		@include gallery_grid($whole,$third,$third);
	}
}

.gallery-4-up {
	.image  {
		@include gallery_grid($half,$half,$quater);
	}
}

.gallery-5-up {
	.image  {
		@include gallery_grid($half,$quater,$quater);
	}
	.image-1-of-5 {
		@include gallery_grid($whole,$half,$half);
	}
}

.gallery-6-up {
	.image  {
		@include gallery_grid($half,$third,$third);
	}
}

.gallery-7-up {
	.image-1-of-7 {
		@include gallery_grid($whole,$third,$third);
	}
	.image-2-of-7, .image-3-of-7 { 
		@include gallery_grid($half,$third,$third);
	}
	.image-4-of-7, .image-5-of-7, .image-6-of-7, .image-7-of-7  {
		@include gallery_grid($half,$quater,$quater);
	}
}

.gallery-8-up {
	.image  {
		@include gallery_grid($half,$quater,$quater);
	}
}

.gallery-9-up {
	.image-1-of-9  {
		@include gallery_grid($whole,$third,$third);
	}
}

.gallery-10-up {
	.image-7-of-10, .image-8-of-10, .image-9-of-10, .image-10-of-10  {
		@include gallery_grid($half,$quater,$quater);
	}
}

.gallery-11-up {
	.image  {
		@include gallery_grid($half,$quater,$quater);
	}
	.image-1-of-11 {
		    @include gallery_grid($whole,$third,$third);
	}
	.image-2-of-11, .image-3-of-11,   {
		@include gallery_grid($half,$third,$third);
	}
}