basicSusyBreakpoints.scss

// $breakpoint-no-queries: false;
$breakpoint-no-query-fallbacks: true;

$susy: (
	gutters: 0.2
);

$layouts: (
	small: (
		break: 0em 37.5em,
		grid: (
			columns: 5,
		)
	),
	medium: (
		break: 37.5em 62em,
		grid: (
			columns: 9,
		)
	),
	large: (
		break: 62em,
		grid: (
			columns: 18,
		),
		fallback: ".lt-ie9"
	)
);
@mixin bp($break-name) {
	$layout: map-get($layouts, $break-name);
	@if map-has-key($layout, "fallback") {
		@include susy-breakpoint(map-get($layout, "break"), map-get($layout, "grid"), map-get($layout, "fallback")) {
			@content;
		}
	} @else {
		@include susy-breakpoint(map-get($layout, "break"), map-get($layout, "grid")) {
			@content;
		}
	}
}

// Example

.col {
	@include bp(small) {
		@include span(1 of 5);
		&:nth-child(5n) {
			@include last;
		}
	}
	@include bp(medium) {
		@include span(1 of 9);
		&:nth-child(9n) {
			@include last;
		}
	}
	@include bp(large) {
		@include span(1 of 18);
	}
}
.large-last {
	@include bp(large) {
		@include last;
	}
}

// Compiles to:

@media (min-width: 0em) and (max-width: 37.5em) {
  .col {
    width: 17.24138%;
    float: left;
    margin-right: 3.44828%;
  }
  .col:nth-child(5n) {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 37.5em) and (max-width: 62em) {
  .col {
    width: 9.43396%;
    float: left;
    margin-right: 1.88679%;
  }
  .col:nth-child(9n) {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 62em) {
  .col {
    width: 4.6729%;
    float: left;
    margin-right: 0.93458%;
  }
}
.lt-ie9 .col {
  width: 4.6729%;
  float: left;
  margin-right: 0.93458%;
}

@media (min-width: 62em) {
  .large-last {
    float: right;
    margin-right: 0;
  }
}
.lt-ie9 .large-last {
  float: right;
  margin-right: 0;
}