Skip to content

Instantly share code, notes, and snippets.

@Brlaney
Created September 18, 2021 00:44
Show Gist options
  • Save Brlaney/d0b58a82602227afa4a2df5068837373 to your computer and use it in GitHub Desktop.
Save Brlaney/d0b58a82602227afa4a2df5068837373 to your computer and use it in GitHub Desktop.
scss/mixins/_height.scss
$breakpoints: (
xxs: 575px,
xs: 650px,
sm: 725px,
md: 800px,
lg: 875px,
xlg: 960px,
);
@mixin respond-above-height($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
$breakpoint-value: map-get($breakpoints, $breakpoint);
@media (min-height: $breakpoint-value) {
@content;
}
} @else {
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}
@mixin respond-below-height($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
$breakpoint-value: map-get($breakpoints, $breakpoint);
@media (max-height: ($breakpoint-value - 1)) {
@content;
}
} @else {
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}
@mixin respond-between-height($lower, $upper) {
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
$lower-breakpoint: map-get($breakpoints, $lower);
$upper-breakpoint: map-get($breakpoints, $upper);
@media (min-height: $lower-breakpoint) and (max-height: ($upper-breakpoint - 1)) {
@content;
}
} @else {
@if (map-has-key($breakpoints, $lower) ==false) {
@warn 'Your lower breakpoint was invalid: #{$lower}.';
}
@if (map-has-key($breakpoints, $upper) ==false) {
@warn 'Your upper breakpoint was invalid: #{$upper}.';
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment