Skip to content

Instantly share code, notes, and snippets.

@mikem33
Created Mar 12, 2019
Embed
What would you like to do?
Media Queries Sass Mixins
// $Media $Queries
@mixin above($value, $width: true) {
@if $width {
@media (min-width: em($value)) {
@content;
}
} @else {
@media (min-height: em($value)) {
@content;
}
}
}
@mixin below($value, $width: true) {
@if $width {
@media (max-width: em($value)) {
@content;
}
} @else {
@media (max-height: em($value)) {
@content;
}
}
}
@mixin between($minValue, $maxValue, $width: true) {
$minValue: em($minValue);
$maxValue: em($maxValue);
@if $width {
$from: '(min-width: #{$minValue})';
$to: '(max-width: #{$maxValue})';
$media: $from + ' and ' + $to;
@media #{$media} {
@content;
}
} @else {
$from: '(min-height: #{$minValue})';
$to: '(max-height: #{$maxValue})';
$media: $from + ' and ' + $to;
@media #{$media} {
@content;
}
}
}
// $Convert Pixels to Ems
@function em($pixels, $context: $browserContext) {
@if (unitless($pixels)) { $pixels: $pixels * 1px; }
@if (unitless($context)) { $context: $context * 1px; }
@return $pixels / $context * 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment