diff --git a/scss/tools/_media.scss b/scss/tools/_media.scss index 62ba599..43d7d44 100644 --- a/scss/tools/_media.scss +++ b/scss/tools/_media.scss @@ -22,6 +22,13 @@ $media-breakpoints: $breakpoints !default; } } +// Media only automatically create a "only screen and(min-width: $minvalue) and (max-width: $maxvalue)" media query. +@mixin mediaOnly($minvalue, $maxvalue) { + @media only screen and (min-width: $minvalue) and (max-width: $maxvalue) { + @content; + } +} + // Media mixin for easier readable media queries. // // Usage: @@ -30,6 +37,10 @@ $media-breakpoints: $breakpoints !default; // @include media('' { - @include mediaMin(map-get($media-breakpoints, $currentBreakpoint) + 1px) { + $value: map-get($media-breakpoints, $currentBreakpoint); + + @if not $value { + @error 'Following condition is not allowed: #{$condition}'; + } + + @include mediaMin($value + 1) { @content; } } @else if $function == '<' { @@ -64,7 +87,40 @@ $media-breakpoints: $breakpoints !default; @content; } } @else { - @error 'Following condition is not allowed: #{$condition}'; + @if $condition == 'default' { + $maxBreakpoint: 0; + + @each $name, $breakpoint in $media-breakpoints { + @if $breakpoint > $maxBreakpoint { + $maxBreakpoint: $breakpoint; + } + } + + @if $maxBreakpoint > 0 { + $maxBreakpoint: $maxBreakpoint + 1; + } + + @include mediaMin($maxBreakpoint) { + @content; + } + } @else { + $maxvalue: map-get($media-breakpoints, $condition); + $minvalue: 0; + + @if not $maxvalue { + @error 'Following condition is not allowed: #{$condition}'; + } + + @each $name, $breakpoint in $media-breakpoints { + @if $breakpoint > $minvalue and $breakpoint < $maxvalue { + $minvalue: $breakpoint + 1; + } + } + + @include mediaOnly($minvalue, $maxvalue) { + @content; + } + } } }