Skip to content

Instantly share code, notes, and snippets.

@mcurren
Last active June 11, 2019 17:44
Show Gist options
  • Save mcurren/e06b50d00d45756a7081c60a3c351dfb to your computer and use it in GitHub Desktop.
Save mcurren/e06b50d00d45756a7081c60a3c351dfb to your computer and use it in GitHub Desktop.
SASS breakpoint mixin with nested variable map
/**
* Map-get function for nested variable maps
* (required)
*/
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
/**
* Breakpoint variable map
* Can be adjusted as necessary for your needs
*/
$breakpoints: (
xs: (
min: 480px,
max: 767px,
),
sm: (
min: 768px,
max: 991px,
),
md: (
min: 992px,
max: 1279px,
),
lg: (
min: 1280px,
max: 1440px,
),
);
/**
* Media query mixin
*/
@mixin bp($size, $direction: min) {
@if map-deep-get($breakpoints, $size, $direction) {
// min OR max query
@media (#{$direction}-width: #{map-deep-get($breakpoints, $size, $direction)}) {
@content;
}
} @else {
// min AND max query
@media (min-width: #{map-deep-get($breakpoints, $size, min)}) and (max-width: #{map-deep-get($breakpoints, $direction, max)}) {
@content;
}
}
}
/**
* Usage examples
*/
@include bp(lg) { ... } // @media (min-width: 1280px) { ... }
@include bp(md, max) { ... } // @media (max-width: 1279px) { ... }
@include bp(xs, md) { ... } // @media (min-width: 480px) and (max-width: 1279px) { ... }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment