// Simpler way to reference your breakpoints with a set of presets // as well as simple syntax to create new specific breakpoints! // The limit accepts min or max so you can set a min-width or max-width breakpoint, // the width is self explanatory and if you want to use the built in defaults // reference them (large, medium, or small constraints) in the last variable and // set the other two to 0. @mixin breakpoint($breakpoint-preset:0,$breakpoint-max-width:0,$breakpoint-min-width:0,
$breakpoint-name:'breakpoint-#{$breakpoint-max-width}-#{$breakpoint-min-width}'){ @if($breakpoint-preset=='none'){ @media(max-width:$breakpoint-max-width) and (min-width:$breakpoint-min-width){ @content; } } @elseif($breakpoint-preset=='largest'){ $breakpoint-min-width:1000px; $breakpoint-name:'largest'; @media(min-width:$breakpoint-min-width){ @content; } } @elseif($breakpoint-preset=='computers'){ $breakpoint-min-width:701px; $breakpoint-name:'computers'; @media(min-width:$breakpoint-min-width){ @content; } } @elseif($breakpoint-preset=='mobile'){ $breakpoint-max-width:700px; $breakpoint-min-width:0px; $breakpoint-name:'mobile'; @media(max-width:$breakpoint-max-width) and (min-width:$breakpoint-min-width){ @content; } } @elseif($breakpoint-preset=='tablet'){ $breakpoint-min-width:580px; $breakpoint-name:'mobile'; @media(min-width:$breakpoint-min-width){ @content; } } @elseif($breakpoint-preset=='smallest'){ $breakpoint-max-width:580px; $breakpoint-min-width:0px; $breakpoint-name:'mobile'; @media(max-width:$breakpoint-max-width) and (min-width:$breakpoint-min-width){ @content; } }
}