Update Sass media queries

[lucasvallenet]

Description:

Update the media queries system with a Sass list.

This is going to lighten the Sass syntax and prevent media queries mistakes (ex: @media (min-width: $to-large)). It will also allow us to loop through each breakpoints to create utility classes for example.

I created four functions to compose the desired media query:

1. mq($breakpoint, $type: "min") — Creates a min-width or max-width media query expression.
2. mq-min($breakpoint) — Alias of mq($type: "min"); Creates a min-width media query expression.
3. mq-max($breakpoint) — Alias of mq($type: "max"); Creates a max-width media query expression.
4. mq-between($breakpointMin, $breakpointMax) — Creates a min-width and max-width media query expression.

Use:

Old syntax

@media (min-width: $from-large) { ... }
@media (max-width: $to-large) { ... }
@media (min-width: $from-small) and (max-width: $to-large) { ... }

New syntax

@media #{mq-min("large")} { ... }
@media #{mq-max("large")} { ... }
@media #{mq-between("small", "large")} { ... }

Advantage:

The Sass list allows us to loop through each breakpoints to create utility classes.

Example

@each $breakpoint in $breakpoints {
    $key: nth($breakpoint, 1);
    $bp: nth($breakpoint, 2);

    // Media queries min
    @media #{mq-min($key)} {
        $modifier: \@#{$key};
        .u-display-block#{$modifier} {
            display: block; !important
        }
    }

    // Media queries max
    @media #{mq-max($key)} {
        $modifier: \@#{$key}-max;
        .u-display-block#{$modifier} {
            display: block; !important
        }
    }
}

This will return a class for each breakpoint like so: .u-display-block@small and .u-display-block@small-max

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	7e70e2a
Status:	✅  Deploy successful!
Preview URL:	https://c5688c9a.locomotive-boilerplate.pages.dev
Branch Preview URL:	https://feature-mediaqueries.locomotive-boilerplate.pages.dev

View logs

[devenini]

Hello! It didn't work straight away on my side. I pushed a fix that update the functions names and I corrected typos inside the SCSS functions.

I like the idea of using scss function for our media queries. I think the function names are clear and I can see myself using this utils. Vouched.

[mcaskill]

Outcome from meeting on 2022-10-05

• Status: On hold until further notice.
• Jeremy and Lucas B. disapproves of the overly complicated string interpolated syntax.
• Deven likes the proposal. With IDE snippets, this can be useful.
• Lucas V., and most, appreciate the proposed ability to iterate predefined media queries.