@import "settings"; @function set-breakpoint( $min : false, $max : false, $custom : false, $legacy-support : false ) { @if (not $min) and (not $max) and (not $custom) { @warn "Either $min, $max, or $custom must be defined for set-breakpoint to work."; } @if $min and $max { // Both $min and $max @return "(min-width: #{ $min }) and (max-width: #{ $max })", $legacy-support; } @else { @if $min and (not $max) { // Min only: @return "(min-width: #{ $min })", $legacy-support; } @if $max and (not $min) { // Max only: @return "(max-width: #{ $max })", $legacy-support; } @else { // Custom: @return $custom, $legacy-support; } } } @mixin at-breakpoint( $breakpoint, $legacy-support: false ) { // Setting variable for reference // in the content of the mixin call $at-breakpoint: true !global; @media #{ nth( $breakpoint, 1 ) } { @content; } @if $legacy-support or nth( $breakpoint, 2 ) { #{ $legacy-selector } & { /* Fallback for browsers not supporting media queries */ @content; } } // Reset reference $at-breakpoint: false !global; }