Mixin for multiple Foundation mixins & modifiers

README.md

Breakpoint Mixin

Mixin using Foundation 6's great breakpoint mixin, which uses the breakpoint maps.

Usage

Multiple breakpoints

The following will compile down to medium, and also the global portrait.

@include tm-breakpoint(medium, portrait) {
  color: red;
}

Multiple breakpoints with modifier on one

The following will compile down to landscape, and also medium portrait.

@include tm-breakpoint(landscape, 'medium+portrait') {
  color: blue;
}

_breakpoint.scss

@mixin tm-breakpoint($breakpoints...) {
	
	// each argument will be checked as a breakpoint
	@each $bp in $breakpoints {
		// whenever a + exists in the breakpoint, it is a variation
		$index: str-index($bp, '+');
		@if($index) {
			$variation: str-slice($bp, 1, $index - 1); // the name of the variation
			$bp: str-slice($bp, $index + 1); // the name of the breakpoint
			@include breakpoint($bp) { // use foundations breakpoint mixin for the main breakpoint
				@include breakpoint($variation) { // use foundations breakpoint mixin for the variation
					@content; // content
				}
			}
		} @else {
			@include breakpoint($bp) { // no varation
				@content;
			}
		}
	}
}