// Responsive media queries
@mixin breakpoint($breakpoint) {
@if $breakpoint == "" { @content; } @else { // Retrieves the value from the key $value: map-get($breakpoints, $breakpoint); // If the key exists in the map @if $value != null { // Prints a media query based on the value @media (min-width: $value) { @content; } } // If the key doesn't exist in the map @else { @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map."; } }
}
// Retina media query
@mixin retina-media-query {
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { @content; }
}
// Clearfix // // Clears floats via mixin.
@mixin clearfix {
&::before { display: table; content: ""; } &::after { display: table; clear: both; content: ""; }
}