Skip to content

Instantly share code, notes, and snippets.

@joshuacerbito
Last active May 4, 2023 17:02
Show Gist options
  • Save joshuacerbito/f994908c4610273a04538ffeb20b12f3 to your computer and use it in GitHub Desktop.
Save joshuacerbito/f994908c4610273a04538ffeb20b12f3 to your computer and use it in GitHub Desktop.
Respond Mixin
/*---------------------------------------------------------------*\
RESPONSIVE PROPERTY HANDLER
handles the per-breakpoint property for mobile-first approach
note: requires a key-less 'breakpoints' scss map
e.g. $breakpoints: ( 320px, 760px, 1080px, 1280px );
usage:
@include respond((
display: flex,
margin: (2px, 3px, 4px, 5px),
padding: (3rem, 4rem, 5rem, 6rem),
flex: ("0 1 50%", null, (1 1 100%))
));
\*---------------------------------------------------------------*/
@mixin respond($args) {
@each $propname, $propvalues in $args {
@if( $propname != null ) {
$value : unquote(#{nth($propvalues, 1)});
#{$propname} : $value;
}
}
@for $bp from 2 through length($breakpoints) {
@media screen and (min-width: #{nth($breakpoints, $bp)}) {
@each $propname, $propvalues in $args {
@if $bp <= length($propvalues) {
$value : unquote(#{nth($propvalues, $bp)});
@if( $propname != null ) {
#{$propname} : $value;
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment