Using mixin grid-media-query for multiple breakpoints

[ericrovtar]

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!

[Cleecanth]

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...
}

[KittyGiraudel]

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)).

[Cleecanth]

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.

[ericrovtar]

Clever. Thanks, guys!