Los preprocesadores como Sass nos ayudan a flexionar nuestros músculos de desarrollo en casi todas las áreas de nuestro CSS. Las variables, los mixins, la herencia y muchas otras características excelentes hacen que la codificación sea más fácil y más concisa que nunca.
Entonces, ¿qué hay de aprovechar Sass para un diseño responsivo, o más específicamente, para consultas de medios? ¿Existen características de Sass que combinen particularmente bien con consultas de medios? ¿Hay algo que debas evitar? Únete a mí para experimentar y descubrir las respuestas.
¿Cómo funcionan las características básicas de Sass con consultas de medios?
He realizado mucha experimentación últimamente con Sass y consultas de medios para ver qué funciona y qué no. Los resultados son bastante variados: algunas cosas funcionan y otras no. En general, no hay nada lo suficientemente impresionante como para cambiar completamente la forma en que se usan las consultas de los medios, pero aún así vale la pena repasar algunos ejemplos que ilustran cómo funcionan los dos juntos.
Variables dentro de una consulta de medios: Sí
Nuestra primera prueba examina si una variable establecida en Sass se traslada al cuerpo de una consulta de medios. La pregunta es de alcance: ¿Puedo establecer una variable fuera de una consulta de medios y luego usarla dentro de una consulta de medios?
Resulta que esto funciona bien. Nuestra variable genérica de tamaño de fuente establece efectivamente el tamaño de fuente a 10px dentro de la consulta de medios.
Variables como puntos de ruptura: No
Mi siguiente pregunta fue si podría o no usar variables para establecer mis puntos de interrupción. No estoy seguro de que esta sea una buena idea, pero más básica que esa pregunta era si es posible o no. ¿Qué pasa cuando trato de hacer esto?
Aparentemente, este no es un uso válido de las variables Sass ya que este código genera un error y no se compila. Intenté lo mismo en MENOS y recibí resultados igualmente inútiles. Esta vez compiló sin lanzar un error pero el valor no se transfirió correctamente.
Extendiendo dentro de una consulta de medios: Sort Of?
Extender trabajos con consultas de medios, pero es importante saber cómo Funciona porque los resultados pueden no ser lo que piensas.
Nuestro primer ejemplo utiliza @extend como se supone que debe usarse. Aquí le dije a la clase errorTwo que heredara los estilos de la clase errorOne y estableciera el color en azul.
Predeciblemente, esto produce exactamente el resultado que queremos. A @extend no le importa que esté dentro de una consulta de medios, funciona igual que en cualquier otro lugar.
Entonces, ¿qué sucede cuando jugamos un poco con esta estructura y colocamos parte de nuestro código fuera de la consulta de medios? Aquí he establecido los estilos para errorOne y errorDos fuera de la consulta de medios y luego intenté usar algunas prácticas de herencia cuestionables al restablecer los erroresDos estilos dentro de la consulta de medios a través de una extensión de errorOne.
Aquí está el CSS compilado de este código. La esperanza era que los estilos errorOne fuera de la consulta de medios se aplicaran a errorTwo dentro de la consulta de medios, pero en lugar de eso, @extend funcionó como si estuviera diseñado para: combinó los selectores en la ubicación original y aplicó los estilos compartidos.
Es importante tener en cuenta que el código anterior es muy diferente del CSS deseado, que se muestra a continuación. Aquí errorOne y errorTwo se definen individualmente con diferentes estilos, y luego, cuando la consulta de medios tiene efecto, se configura para que coincida con errorOne con la adición de un cambio de color.
Mixins dentro de una consulta de medios: Sí
Al igual que con las variables, podemos declarar una mezcla fuera de una consulta de medios y aplicarla dentro de una consulta de medios. Por ejemplo, aquí configuro una mezcla de fuentes con algunos estilos de texto y luego la llamé dentro de una consulta de medios.
Poner una consulta de medios en una mezcla: No
Desde aquí puede que se esté preguntando si realmente puede enrollar una consulta de medios completa en una mezcla y luego pasar algunos argumentos cuando desee implementarla. Por lo que puedo decir, no hay manera de hacer esto en Sass, LESS o Stylus.
Anidar consultas de medios
Hasta ahora no nos hemos encontrado con grandes sorpresas. En su mayor parte, todo funciona como se esperaría, con la posible excepción de los puntos de interrupción que no aceptan variables. Nuestro siguiente tema de exploración es una característica integrada en Sass que se creó específicamente para consultas de medios: anidamiento.
Sass te permite anidar todo tipo de código. Ciertamente no es un requisito cuando se codifica con Sass, pero la característica está ahí si lo desea. Por ejemplo, digamos que queríamos una forma más concisa de escribir el siguiente CSS:
Con Sass, podemos evitarnos la molestia de crear un bloque de declaración separado y simplemente anidar los estilos de desplazamiento dentro de la clase de botón.
Esta misma lógica se puede utilizar para aplicar consultas de medios a elementos específicos. En lugar de crear una sección dedicada que incluya todas sus consultas de medios, puede anidarlas todas y, por lo tanto, combinarlas con los estilos que están modificando. Aquí hay un ejemplo:
Pros y contras de Nesting Media Consultas
La idea detrás de las consultas de medios de anidación es decente, al menos en la superficie. Como mencioné anteriormente, combina las consultas de los medios con los estilos originales que están modificando, que es un esquema organizativo decente. También reduce la necesaria repetición de los selectores, lo cual es bueno.
Desafortunadamente, en mi opinión, estos beneficios son superados por el hecho de que esto produce un código desordenado. Este problema se presenta claramente a medida que su código se vuelve más complejo. Aquí tenemos dos elementos diferentes, cada uno aprovechando la función de consulta de medios anidada.
El Sass anterior se compilará en el CSS a continuación. Como puede ver, cada consulta de medios se escribe individualmente y aparece justo después de los estilos con los que está asociada.
Si ha estado trabajando con diseño responsivo, entonces probablemente tenga inmediatamente algunos problemas con la forma en que se compila este código. Para ver a qué me refiero, veamos cómo lo codificaría a mano en CSS puro si lo estuviera haciendo manualmente.
Llámame loco, pero creo que esto es superior a lo que escupe Sass. Tengo un problema real con el hecho de que las declaraciones de consultas de medios idénticas no se combinan. Aquí vemos que no había ninguna razón para escribir la consulta de 300px dos veces cuando simplemente podíamos escribirla una vez y lanzar ambos bloques de declaración dentro.
Además, la organización aquí es más limpia y fácil de seguir. Por lo general, cuando trabajas con consultas de medios, te esperan muchos ajustes. Con el modo Sass, se ve obligado a buscar su código y encontrar cada pieza que necesite cambiar. Si su archivo SCSS contiene cientos de líneas de código, esto podría ser brutal. Con CSS vainilla, podemos poner todas nuestras consultas de medios en un solo lugar y ajustarlas como una unidad.
Directivas de Control
Aunque no estoy particularmente entusiasmado con ninguno de los resultados que recibí de la mezcla de Sass con las consultas de los medios, un área que creo que merece la pena explorar es las directivas de control. Este es un tema delicado porque, si no eres un programador, las directivas de control parecen demasiado complejas para CSS. Solo ten en cuenta antes de que me dejes un comentario desagradable de que estoy jugando con algunas posibilidades aquí.
Dada la naturaleza de las consultas de medios, creo que las directivas de control podrían tener alguna funcionalidad interesante. Después de todo, una consulta de medios en sí es muy parecida a una instrucción if: si la ventana gráfica = x, haga y. Usando un poco de lujo Sass, podemos llevar esto mucho más lejos. A ver si puedes averiguar qué está pasando aquí.
Básicamente, configuro un elemento con un ancho que reduce su ancho en 100px para cada consulta de medios. Luego configuro un mixin que cambia el color del elemento si su ancho está por debajo de cierto punto.
Esta técnica podría ser útil para muchas cosas diferentes, como cambiar una fuente de script a algo estándar cuando el tamaño es demasiado pequeño. Aquí hay una versión ligeramente modificada que mira hasta que el objeto tiene menos de 400 píxeles de ancho y luego establece la altura a la mitad del ancho.
Así es como se compila esto. Como puede ver, la altura no se modificó en la primera consulta de medios porque el ancho no es inferior a 400 px. En la segunda consulta de medios, aunque el ancho es de 300 px, la altura se cambió a 150 px. Lo bueno de esto es que el código compilado es conciso y no tiene ninguna de las lógicas locas de arriba.
Conclusión
Me hubiera encantado haber presentado una discusión acerca de cómo Sass es un cambio de juego cuando se trata de consultas de los medios, pero en este momento creo que lo contrario es cierto. Probablemente sea mejor evitar cualquier cosa que no sean las funciones de Sass más básicas en su implementación de consultas de medios. Siéntase libre de usar variables y combinaciones como siempre (acepte en la declaración de punto de interrupción), pero tenga cuidado con la herencia que funciona de manera diferente de lo que espera y piense dos veces antes de anidar una consulta de medios porque a largo plazo probablemente esté creando más trabajo para usted. .
Una excepción en la que puedo pensar es en las directivas de control, que son bastante avanzadas y tienen algunas posibilidades fascinantes cuando se combinan con consultas de medios.
¿Ha intentado implementar Sass junto con consultas de medios? ¿Descubrió algunos trucos geniales o decidió evitar la práctica por completo? Háganos saber en los comentarios.