El problema que estoy tratando de resolver:
Tengo una lista que responde a todos los tamaños de pantalla, pero el usuario prefiere configurar 2 listas en la pantalla una al lado de la otra. El problema es que la capacidad de respuesta de estas listas está comprobando el ancho de la pantalla, no el ancho de su contenedor. Si es una one-list , es el tamaño de la pantalla. Si es una two-list , es la mitad del tamaño de la pantalla debido a que las listas están una al lado de la otra.
Mi solución a este problema fue simplemente duplicar los píxeles en las consultas de medios, lo que significa que alcanzo cierto estilo receptivo antes (como activar el estilo móvil a 1200 px en lugar de 600 px). ¡Esto funciona! Si doblo manualmente los píxeles en las consultas de medios, todo funciona bien.
Además, en alguna consulta de medios fija, apilaré las listas una al lado de la otra verticalmente debido a que el tamaño de la pantalla es demasiado pequeño para ser legible.
Sin embargo, en la práctica, detectar pragmáticamente una lista de 2 a través de una clase css y, por lo tanto, actualizar los tamaños de pantalla de ancho mínimo y ancho máximo de consulta de medios está resultando difícil.
A continuación se muestra lo que pensé que funcionaría...
$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) { ... } ... Esto funciona excepto hasta que me di cuenta de que las variables siempre se sobrescriben, incluso si no se establece la clase two-list . En otras palabras, los píxeles siempre se duplican.
¿Cómo puedo lograr lo que estoy tratando de hacer aquí? ¿Es incluso posible usar variables SCSS?
¿Hay alguna forma de que pueda establecer pragmáticamente el tamaño de las consultas de medios dadas ciertas condiciones, como la presencia de una clase?
Gracias
Me di cuenta de que estaba pensando demasiado en cómo resolver este problema en particular. ¡Realmente no necesito variables SASS/SCSS!
Solo puedo usar diferentes consultas de medios que se aplican a diferentes clases (ver más abajo)
Este método crea un estilo duplicado y puede hacer que el mantenimiento del código sea un poco más intensivo y más propenso a errores. Es por eso que también introduje 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() } }El único problema con este enfoque es que no es escalable. No puedo introducir repentinamente tres listas o cuatro listas porque eso significa que tengo que agregar nuevas consultas de medios específicamente para esos casos con una clase para cada una. Pero para mi caso de uso funcionará bien.