// Mixins

@mixin media-query($breakpoint) {
	@if (map-get($breakpoints, $breakpoint)) == null {
		@content;
	}
	@else {
		@media (min-width: #{map-get($breakpoints, $breakpoint)}) {
			@content;
		}
	}
}

@mixin generate-breakpoint-prefixes {
	@each $breakpoint-name, $breakpoint-value in $breakpoints {
		$breakpoint-prefix: "#{$breakpoint-name}-";
		@include media-query($breakpoint-name) {
			.#{$breakpoint-prefix} { @content; }
		}
	}
}

// Mixins

@mixin media-query($breakpoint) {
	@if (map-get($breakpoints, $breakpoint)) == null {
		@content;
	}
	@else {
		@media (min-width: #{map-get($breakpoints, $breakpoint)}) {
			@content;
		}
	}
}

@mixin generate-breakpoint-prefixes {
	@each $breakpoint-name, $breakpoint-value in $breakpoints {
		$breakpoint-prefix: "#{$breakpoint-name}";
		@include media-query($breakpoint-name) {
			.#{$breakpoint-prefix}\: { @content; }
		}
	}
}

Change responsive classes to use colons
Change responsive classes to use colons
