How to conditionally set media query min-width pixels given the condition that a class is set?

Question

The problem I'm trying to solve:

I have a list which is responsive for all screen sizes but the user has a preference to set 2 lists on the screen side by side. The problem is, the responsiveness of these lists is checking the screen width, not the width of its container. If it's a class one-list, it's the size of the screen. If it's a class two-list, it's half the screen size due to the lists being side by side.

My solution to this problem was to simply double the pixels in the media queries, meaning that I reach certain responsive styling sooner (like kicking in with the mobile styling at 1200px rather than 600px). This works! If I manually double the pixels in the media queries, everything works fine.

Also, at some fixed media query, I will stack the side by side lists vertically due to the screen size being too small to be readable.

However in practice, to pragmatically detect a 2-list via a css class and therefore update the media query min-width and max-width screen sizes is proving to be difficult.

Below is what I thought would work...

$min_600: 600px;
$min_850: 850px;
$min_1024: 1024px;
$min_1400: 1400px;
$min_2000: 2000px;
$max_599: 599px;
$max_400: 400px;

.list.two-list {
    $min_600: 1200px !global;
    $min_850: 1900px !global;
    $min_1024: 2048px !global;
    $min_1400: 2800px !global;
    $min_2000: 4000px !global;
    $max_599: 1198px !global;
    $max_400: 800px !global;
}

@media only screen and (min-width: $min_600) {
...
}

...

This works except until I realized the variables are always being overwritten, even if the two-list class is not being set. In other words, the pixels are always doubled.

How do I accomplish what I'm trying to do here? Is it even possible using SCSS variables?

Is there any way I can pragmatically set media query sizes given certain conditions, like the presence of a class?

Thank you

Answer 1

I realized I was overthinking how to go about solving this particular problem. I don't really need SASS/SCSS variables!

I can just use different media queries applying to different classes (see below)

This method creates duplicate styling and can make maintenance of code a bit more intensive and more prone to bugs. That's why I also introduced mixins.

@mixin list-style-min-600() {
    // Styling for list for min-width 600px media query
}

@media only screen and (min-width: 600px) {
    .list.one-list {
        // styling for one list
        @include list-style-min-600()
    }
}

@media only screen and (min-width: 1200px) {
    .list.two-list {
        // styling for one list, just kicks in later at 1200px 
        // rather than 600px
        @include list-style-min-600()
    }
}

The only problem with this approach is that it is not scalable. I cannot all of a sudden introduce three-list or four-list because that means I have to add in new media queries specifically for those cases with a class for each. But for my use case it will work just fine.