csswizardry-grids
csswizardry-grids copied to clipboard
Using mixin grid-media-query for multiple breakpoints
I'm guessing I know the answer, but is there a way to use the mixin grid-media-query to render a block of styles for multiple breakpoints. For example, if I want styles for the desk and lap breakpoints.
Thanks!
Adding an extra each statement in the grid-media-query mixin will accomplish this.
@mixin grid-media-query($media-queries){
$breakpoint-found: false;
@each $media-query in $media-queries {
@each $breakpoint in $breakpoints{
$name: nth($breakpoint, 1);
$declaration: nth($breakpoint, 2);
@if $media-query == $name and $declaration{
$breakpoint-found: true;
@media only screen and #{$declaration}{
@content;
}
}
}
}
@if $breakpoint-found == false{
@warn "Breakpoint '#{$media-query}‚' does not exist"
}
}
From there, you can just declare:
@include grid-media-query((palm, lap)){
// Your code here...
}
Actually this won't work because you still have a single argument in the mixin signature, but you pass it 2 arguments when including it.
Either you have to turn $media-queries
into an arglist
(like this: @mixin grid-media-query($media-queries...)
), or you have to wrap your arguments with braces when including it to pass a single list to the mixin (like this: @include grid-media-query((palm, lap))
.
Hugo is right. I've since implemented this into my codebase and you need to wrap them in double braces.
Which I personally don't mind since it further distinguishes multiple media-query inclusions from singles.
I've updated my code example to reflect this.
Clever. Thanks, guys!