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